使用表格+CSS制作表单以及对于CSS常用重要选择器的应用理解 - 作业

首页 > 博客列表 > 使用表格+CSS制作表单以及对于CSS常用重要选择器的应用理解

博主信息

博文 15

粉丝 0

访问量 11985

专题推荐

更多>

本次作业使用表格+CSS制作了一个登录表单，以及对于常用的选择器进行使用查看效果（如id选择器 class选择器属性选择器伪类选择器等），其中属性选择器的分类较多

作业实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS常用选择器的应用实战</title>
</head>
<style type="text/css">
    #d1{/*id选择器*/
        font-size:18px;
    	width:600px;
    	margin:30px auto;
    }
    .p1{/*class类选择器*/
        font-size:30px;/*定义文本字体大小*/
        font-weight: bolder;
        text-align: center;
        line-height: 2em;/*定义行高2em=30px*2=60px;*/
        background-color: #00bcd4;
    }
    table caption{
    	font-size: 24px;
    	font-weight: bold;
    	background-color: #00bcd4;
    }
</style>
<body>
<div id="d1">
    <p class="p1">CSS常用选择器的应用实战</p>
    <p><b>登录表单：</b>用表格+css布局实现用户登录表单</p><hr>
    <form action="homework.php" mothod="post">
        <table border="0" cellspacing="0" cellpadding="10px" width="500px" align="center" bgcolor="#00bcd4">
        <caption>登录</caption>
            <tr>
                <td align="right" width="200px"><label for="username">用户名：</label></td>
                <td align="left" width="300"><input type="text" name="username" value="" placeholder="请填写用户名"></td>
            </tr>
            <tr>
                <td align="right" width="200px"><label for="password">密    码：</label></td>
                <td align="left" width="300"><input type="text" name="password" value="" placeholder="请填写密码"></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                <hr>
                <input type="submit" name="submit" value="立即登录">
                    
                <input type="submit" name="submit" value="前往注册">
                </td>
            </tr>
        </table><hr>
    </form>
    <p><b>常用选择器：</b>标签选择器、属性选择器、id选择器、派生选择器、子选择器、相邻选择器、群组选择器、伪类选择器</p><hr>
    <ul>
        <li id="li1">一</li>
        <li class="li2">二</li>
        <li class="li3">三</li>
        <li class="music read">四</li>
        <li class="music read">五</li>
        <li class="game work">六</li>
        <li class="read game">七</li>
        <li>八</li>
        <li>九</li>
    </ul>
<style text="text/css">
    ul{/*标签选择器*/
    	width:600px;
    	margin:0;
    	border:1px solid #00bcd4;
    	padding:15px 10px;
    }
    ul:after {  /*伪类选择器，子元素撑开父块*/
            content:'';  /*在子元素尾部添加空内容元素*/
            display: block;  /*设置为块级元素显示*/
            clear:both;   /*清除二边的浮动*/
        }
     ul li {/*派生选择器*/
            list-style: none; /*去掉默认列表项样式 无序列表的圆点*/
            float: left;  /*左浮动*/
            width: 50px;  /*设置宽度*/
            height: 50px; /*设置高度*/
            line-height: 50px; /*垂直居中，行高*/
            text-align: center; /*文本水平居中*/
            border-radius: 20px; /*设置边框圆角*/
            box-shadow: 5px 5px 5px #999;/*设置阴影*/
            background: #00bcd4; /*背景色*/
            margin-right: 10px; /*每个数字块儿之间的右外边距*/
        }
    #li1{/*id选择器*/
    	background-color: green;
    }
    .li2{
    	background-color: red;
    }
    ul li[class] {/*属性选择器：属性名*/
            background-color: blueviolet;
        }
    ul li[class="li3"] {/*属性选择器：属性值*/
            background-color: red;
        }
    ul li[class^="music"]{/*属性选择器：以指定属性值开头*/
    	background-color: #9c27b0;
    }
    ul li[class$="work"]{/*属性选择器：以指定属性值结尾*/
    	background-color: #182881;
    }
    ul li[class$="game"] ~ * {
    	background-color: #a62b55;
    }
</style>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

作业案例运行图：