本次作业使用表格+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>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业案例运行图：
手抄作业图片：
总结：
1本节课涉及知识点较多，作业涉及内容并非涉及全部知识点，总体能理解，但是还不够熟练
2作业涉及内容主要以CSS制作表单以及CSS常用选择器为主
3常用选择器中属性选择器和伪类选择器分类较多，实战项目中伪类选择器应用也不够全面，虽然由于时间和不熟练原因，但课后还是要加强操作查看演示效果！