Correction status:qualified
Teacher's comments:
表单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <form action="" method="get"> <!--get/post提交方式--> <table width="500px" align="center" style="background-color: skyblue" cellspacing="0" cellpadding="8px"> <caption><h2>用户注册</h2></caption> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td align="right"><label for="num">帐号:</label></td> <td><input type="text" name="num" id="num" /></td> </tr> <tr> <td align="right"><label for="password">密码:</label></td> <td><input type="password" name="password" id="password" /></td> </tr> <tr> <td align="right">性别:</td> <td> <input type="radio" name="sex" id="" value="男" />男 <input type="radio" name="sex" id="" value="女" />女 <input type="radio" name="sex" id="" value="保密" />保密 </td> </tr> <tr> <td align="right">爱好:</td> <td> <input type="checkbox" name="hobby[]" id="" name="game" />打游戏 <input type="checkbox" name="hobby[]" id="" name="wash" />洗 <input type="checkbox" name="hobby[]" id="" name="篮球" />篮球 <input type="checkbox" name="hobby[]" id="" name="足球" />足球 </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交" style="margin-left: 100px;border-radius: 8px;cursor:pointer" /> <input type="reset" value="重置" style="margin-left: 100px;border-radius: 8px;cursor:pointer" /> </td> </tr> </table> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
3种单位的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <title>3种单位的区别</title> <body> <div class="px">px</div> <div class="em">em</div> <div class="rem">rem</div> <style> /* 浏览器默认字体16px 最小12px */ .px{ font-size:20px; width:100px; line-height:100px; text-align:center; background-color:#666666; } .em{ /*em =16px 默认值*/ font-size:20px; width:5em; line-height:5em; text-align:center; background-color:red; } .rem{ width:10rem; line-height:10rem; text-align:center; background-color:blue; } </style> </body> </html>
点击 "运行实例" 按钮查看在线实例
样式继承:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <title>样式继承</title> <body> <style> /*在文档中 字体、颜色、字体大小、列表样式、表格可继承*/ /*元素外部的属性 边框 内外边距不可继承*/ body{ font-size:22px; /*可继承*/ } ul{ font-weight:bold; /*可继承*/ border:1px solid red; /*不可继承*/ padding:1rem; /*不可继承*/ } ul li{ border:inherit; /*强制继承*/ padding:inherit; /*强制继承*/ } </style> <nav> <ul> <li class="item1"><a href="">导航1</a></li> <li class="item2"><a href="">导航2</a></li> <li class="item3"><a href="">导航3</a></li> <li class="item4"><a href="">导航4</a></li> </ul> </nav> </body> </html>
点击 "运行实例" 按钮查看在线实例
CSS选择器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <title>样式冲突</title> <body> <!-- 样式优先级 内联:style属性声明在元素内部,仅对当前元素有效 内部:style标签,对当前文件有效 外部:通过link引入css样式 优先级:内联>内部>外部 同名样式后面定义的会覆盖前面的 强制优先级:!import --> <style> h2{ /*color:blue;*/ } </style> <h2 style="color: red">hello world</h2> <style> ul{ margin:0; padding:20px 5px; width:600px; border:1px dashed #666; } /*子块撑开父级*/ ul:after{ content:''; display:block; clear:both; } ul li{ list-style:none; float:left; width:40px; height:40px; line-height:40px; border-radius:50%; background-color:skyblue; text-align:center; margin:0 5px; box-shadow:3px 3px 3px #666666; } /*属性选择器*/ ul li[id]{ background-color:red; } ul li[class]{ background-color:green; } ul li[class="item2"]{ background-color:yellow; } /*以***开头*/ ul li[class^="cat"]{ background-color:blue; } /*以***结尾*/ ul li[class$="big"]{ background-color:#f24f24; } /*属性值中包含**的*/ ul li[class*="t"]{ background-color:#f56f56; } /*层级选择器*/ body ul li{ border:1px solid #000; } /*子选择器*/ ul>li[class="item2"]{ background-color:cyan; } /*相邻选择器*/ ul li[class$="big"] ~ *{ background-color:black; color:#fff; } /*相邻兄弟选择器*/ ul li[class$="big"]+li{ background-color:pink; } /*群组选择器*/ h2,p{ font-size:33px; font-weight:bold; } /*伪类*/ a{ font-size:22px; } /*访问后*/ a:link{ color:blue; } /*访问前*/ a:visited{ color:red; } /*获取焦点*/ a:focus{ color:pink; } /*鼠标悬停*/ a:hover{ color:#000; } /*鼠标点击激活的时候*/ a:active { color: aquamarine; } /*伪类选择器 位置*/ ul li:first-child{ /*第一个*/ background-color:#fff !important; } ul li:last-child{ /*倒数第一个*/ color:red; } ul li:nth-child(5){ /*第五个*/ background-color:skyblue; } ul li:nth-child(even){ /*偶数、odd基数*/ background-color:#f4f4f4; } /*伪类选择器: 根据子元素的数量*/ ol :only-child { background-color: lawngreen; } ol li:only-child { background-color: lawngreen; } ul li:nth-last-child(3) { background-color: wheat; } /*规定属于其父元素的第二个 p 元素*/ ol li:nth-of-type(2) { background-color: wheat; } /*空元素*/ :empty{ width:220px; height:220px; background-color:cyan; } :empty:after{ content:'hello world'; /*内容*/ } :empty:before { /*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/ content: url("./static/images/footlogo.png"); } </style> <ul> <li id="item1">1</li> <li class="item2">2</li> <li class="cat dog big">3</li> <li >4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <h2>hello</h2> <p>你好吗</p> <a href="http://www.php.cn/">PHP中文网</a> <div></div> <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> </body> </html>
点击 "运行实例" 按钮查看在线实例