Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>表单实战</title> </head> <body> <form action="demo.html" method="get"> <table align="center" width="400" bgcolor="powderblue"> <h1 align="center">提交表单</h1> <tr> <td> <label for="name">邮箱:</label></td> <td><input type="text" name="name" value="" id="name" placeholder="1652786790"></td> </tr> <tr> <td> <label for="name1"> 密码: </label> </td> <td><input type="text" name="name1" id="name1" value="" placeholder="请输入你的密码?"> </td> </tr> <tr> <td><label for="name2">性别:</label> </td> <td> <!-- 取决于name2的值相等 --> <input type="radio" name="name2">男 <input type="radio" name="name2">女 <input type="radio" name="name2" checked="">保密 <!-- checked设置默认选项 --> </td> </tr> <tr> <td><lable for="name3">兴趣: </lable> </td> <td> <input type="checkbox" name="name3">html <input type="checkbox" name="name3">css <input type="checkbox" name="name3" checked="">javacsript </td> </tr> <tr> <td> <label>级别: </label> </td> <td> <select> <option> html </option> <option selected=""> css </option> <!-- selected=""设置显示谁 --> <option> javascript </option> <option>jquery </option> </select> </td> </tr> <tr> <td> <lable>头像: </lable> </td> <td> <img src="" alt=""> <input type="file" name=""> </td> </tr> <tr> <td><lable> 简介: </lable></td> <td> <textarea name="name5" placeholder="请输入内容"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <hr> <input type="submit" name="" value="提交表单"> <input type="reset" name="" value="重置"> </td> </tr> </table> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>样式继承</title> </head> <body> <style type="text/css" media="screen"> body{ font-size:20px; } ul{ font-weight:bold; border:1px solid #f30; padding:20rem; } ul li{ border:inherit; padding:inherit; /* //继承样式 */ } </style> <ul> <li> 样式继承 </li> <li> 导航菜单 </li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>常用选择器</title> </head> <style type="text/css" media="screen"> ul,li{ list-style:none; } ul:after{ content:""; display:block; clear:both; } ul li{ float: left; width:30px; height:30px; border-radius:50%; background:#f30; text-align:center; line-height:30px; color:#eee; margin-left:5px; } #item1{ background:blue; } .item1{ background:gold; } ul li[class]{ background:blueviolet; } /* ul li[class^="gov"] { background-color:grey; } */ ul li[class$="box"] { background-color: #666; } ul li[class*="te"]{ background:#000; } /* ul li:first-child{ background:#333!important; } */ ul li:last-child{ background:#333; } /* ul li:nth-child(2n+1){ background:#888; } */ ul li:nth-child(2n){ background:#888; } /*伪类选择器: 根据子元素数量*/ /*选择具有唯一子元素的元素*/ ol :only-child { background-color: lawngreen; } ol li:only-child{ } ol li:nth-of-type(2){ background:#999; } :empty { width: 220px; height: 271px; background-color: coral; } :empty:after{ content:"看到我了吗?"; } :empty:before{ content:"url('')"; } </style> <body> <!-- 总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 同一级别 --> <ul> <li id="item1">1</li> <li class="item1">2</li> <li class="gov pin box te">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ol> <li>1</li> </ol> <ol> <li>2</li> <li>3</li> </ol> <ol> <li>4</li> <li>5</li> <li>6</li> </ol> <div></div> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结:
:empty 选择页面中内容为空的元素 :empty:after插入内容
:first-child 选择第一个元素 :last-child 选择最后一个
[class$="pig"] + li 相邻兄弟选择器