abstract:本章主要学习了背景的元素以及什么事块元素以及行内块元素,和行内元素等,通过display,inline行内元素,block块元素,inline-block行内块元素,他们之间可以互相转化。position以及什么是相对定位和绝对定位等。absolute脱离文档流,不占用位置。relative不脱离文档流定位。以及浮动的用法和如何清除浮动。<!DOCTYPE html> <
本章主要学习了背景的元素以及什么事块元素以及行内块元素,和行内元素等,通过display,inline行内元素,block块元素,inline-block行内块元素,他们之间可以互相转化。position以及什么是相对定位和绝对定位等。absolute脱离文档流,不占用位置。relative不脱离文档流定位。以及浮动的用法和如何清除浮动。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS中的边框样式作业</title> <style> .c800{ width: 800px; height: 600px; margin: 0 auto; } .l400{ width: 392px; height: 200px; background: #5cc75b; text-align: center; display: inline-block; line-height: 100px; color: #fff; border: 2px solid ; } .r400{ width: 392px; height: 200px; background: #5195f5; text-align: center; display: inline-block; line-height: 100px; color: #fff; border: 2px solid ; } .l600{ width: 592px; height: 200px; background: #ff0000; text-align: center; display: inline-block; line-height: 100px; color: #fff; margin: 10px 0; border: 2px solid ; } .r200{ width: 192px; height: 200px; background: #5500ff; text-align: center; display: inline-block; line-height: 100px; color: #fff; margin: 10px 0; border: 2px solid ; } .l200{ width: 192px; height: 200px; background: #5500ff; text-align: center; display: inline-block; line-height: 100px; color: #fff; border: 2px solid ; } .c400{ width: 392px; height: 200px; background: #ff9600; text-align: center; display: inline-block; line-height: 100px; color: #fff; border: 2px solid ; } .r200_1{ width: 192px; height: 200px; background: #000000; text-align: center; display: inline-block; line-height: 100px; color: #fff; border: 2px solid ; } .l400:hover{ border: 2px solid #000; } .r400:hover{ border: 2px solid #000; } .l600:hover{ border: 2px solid #000; } .r200:hover{ border: 2px solid #000; } .l200:hover{ border: 2px solid #000; } .c400:hover{ border: 2px solid #000; } .r200_1:hover{ border: 2px solid #000; } .logo{ float: left; text-align: center; padding: 0 20px; width: 100px; height: 60px; font-size: 30px; color: #5195f5; } .nva { width: 800px; height: 60px; margin: 0 auto; } .nva ul li{ list-style: none; float: left; color: #fff; background: #5195f5; margin: 0 10px; padding: 10px 30px; border: 1px solid #5195f5; } .nva ul li:hover{ color: #5195f5; background: #fff; border: 1px solid #5195f5; } .clear{ clear: both; } .kf{ width: 100px; height: 100px; background: #5195f5; color: #fff; position: fixed; top: 30%; right: 1%; text-align: center; line-height: 100px; } </style> </head> <body> <div class="nva"> <div class="logo"> logo </div> <ul> <li>首页</li> <li>关于</li> <li>合作</li> <li>加盟</li> <li>联系</li> </ul> </div> <div class="clear"></div> <div class="c800"> <div class="l400"> 1 </div> <div class="r400"> 2 </div> <div class="l600"> 3 </div> <div class="r200"> 4 </div> <div class="l200"> 5 </div> <div class="c400"> 6 </div> <div class="r200_1"> 7 </div> </div> <div class="kf"> QQ </div> </body> </html>
Correcting teacher:天蓬老师Correction time:2018-11-18 15:46:53
Teacher's summary:class中不要使用无意义的字符和数字来命名。