手写代码补上：
本期作业是CSS常用选择器的使用案例，我还是老老实实按照朱老师讲的进度来制作！
第一个案例：一个简单的表单样式（get方式）
实例
<!doctype html> <html lang="en" xmlns:width="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>表单1（get）</title> </head> <body> <form action="*.php" method="get"> 姓名：<input type="text" name="name" value=""><br> 密码：<input type="password" name="password" value=""><br> 性别：<input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="women">女 <input type="radio" name="sex" value="secret" checked>保密<br> 爱好：<input type="checkbox" name="hobby[]" value="movie">看电影 <input type="checkbox" name="hobby[]" value="game">打游戏 <input type="checkbox" name="hobby[]" value="cock" checked>做饭 <input type="checkbox" name="hobby[]" value="wash">洗衣衣 <br> 级别：<select name="level"> <option value="0">纯洁的小白</option> <option value="1" selected>有一点点污</option> <option value="2">我目空一切</option> <option value="3">我宇宙无敌</option> </select><br> 头像：<input type="file" name="photo" accept="images/*"> <br> <!--<!–<input type="hidden" name="user_id" value="10">–>隐藏域--> 描述：<textarea name="comment" rows="6" cols="30"></textarea><br> <input type="button" name="button" value="提交"> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="image" name="submit" src="images/XXX.jpg" width="30"> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
小结：个人觉得，除了最最简单的提交表单框架，基本上就用不到这种写法了，因为样式的继承问题比较大；
第二个案例：另一个简单的表单样式（post）
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用表单样式（post）</title> </head> <body> <form action="*.php" method="post"> <table border="0" cellspacing="0" cellpadding="8" align="center" width="400" bgcolor="powderblue"> <caption><h2>用户注册</h2></caption> <tr><td colspan="2"><hr></td></tr> <tr align="center"> <td align="right" width="60"><label for="name">邮箱：</label></td> <td align="left" width="300"> <input type="text" id="name" name="name" value="" placeholder="example@mail.com" size="30" width="200"> </td> </tr> <tr align="center"> <td align="right"><label for="password">密码：</label></td> <td align="left"><input type="text" id="password" name="password" value="" placeholder="字母+数字不少于8位" size="30"> </td> </tr> <tr align="center"> <td align="right">性别：</td> <td align="left"> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="women">女 <input type="radio" name="sex" value="secret" checked>保密 </td> </tr> <tr align="center"> <td align="right">兴趣：</td> <td align="left"> <input type="checkbox" name="hobby[]" value="html">HTML <input type="checkbox" name="hobby[]" value="css">CSS <input type="checkbox" name="hobby[]" value="jsvaScript">JavaScript <input type="checkbox" name="hobby[]" value="php" checked>PHP </td> </tr> <tr align="center"> <td align="right"><label for="level">级别：</label></td> <td align="left"> <select name="level" id="level"> <option value="">零基础的小白</option> <option value="" selected>已经入门啦</option> <option value="">曾经做过一些项目</option> <option value="">宇宙牛逼大神级大佬</option> </select> </td> </tr> <tr align="center"> <td align="right"><label for="photo">头像：</label></td> <td align="left"> <img src="images/*.jpg" height="30"> <input type="file" id="photo" name="photo" accept="images/*.jpg"> </td> </tr> <tr align="center"> <td align="right">简介：</td> <td align="left"><textarea name="comment" id="comment" rows="5" cols="40" placeholder="文明上网，理性发言"></textarea></td> </tr> <tr> <td colspan =2 align="center"> <hr> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> </td> </tr> </table> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
小结：研究了半天，终于做出来了，要想效果好还是得用post方式，个人觉得还应该有更简单的能达到好效果的方法！
第三个案例：CSS选择器的使用方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器使用方法</title>
<style>
ul{
margin:0;
width:550px;
border:1px dashed #666;
padding:10px 5px;
}
ul:after{
content:"";
display:block;
clear:both;
}
ul li{
list-style: none;
float:left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius:50%;
box-shadow:2px 2px 2px #888;
background-color: skyblue;
margin: 5px;
}
#item1{
background-color: coral;
}
.item2{
background-color: gold;
}
ul li[class]{
background-color: blueviolet;
}
ul li[class="item2"]{
background-color: gray;
}
ul li[class^=cat]{
background-color: brown;
}
ul li[class$=pig]{
background-color: red;
}
ul li[class*="te"]{
background-color: green;
}
body ul li{
border: 1px solid black;
}
ul>li[class$="pig"]{
background-color: lightblue;
}
ul li[class$="pig"]~*{
background-color: black;
color:white;
}
ul li[class$="pig"]+li{
background-color: deeppink;
color:black;
}
h1,p{
font-size: 2rem;
font-weight: lighter;
margin: 0;
}
a{
font-size: 2rem;
}
a:link{
color: orangered;
}
a:visited{
color: brown;
}
a:focus{
color:lightcoral;
}
a:hover{
color:lightcoral;
}
a:active{
color: lawngreen;
}
ul li:first-child{
background-color: #efefef!important;
}
ul li:last-child{
background-color: lightpink;
}
ul li:nth-child(5){
background-color: goldenrod;
}
ul li:nth-child(even){
background-color: blue!important;
}
ul li:nth-child(odd){
background-color: yellow!important;
}
ol :only-child{
background-color: lightcoral;
}
ul li:nth-last-child(3){
background-color: wheat!important;
}
ol li:nth-of-type(2){
background-color: chocolate;
}
:empty{
width: 220px;
height: 270px;
background-color: lightcoral;
}
:empty:after{
content: '有木有看到我啊？亲爱的';
}
:empty:before{
content:url("images/monkey.png");
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>CSS选择器使用方法</h1>
<p>CSS选择器非常重要，后面jquery都要用到CSS选择器</p>
<a href="http://www.php.cn" target="_blank">PHP中文网</a>
<ol>
<li>列表项1</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：CSS选择器很重要，伪类选择器也是比较烧脑的环节，写一遍代码肯定不行的，还要手写+背诵！