其实html没什么好补充的了，主要是使用css如何构造出各种想要的效果
1.加减框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .inp{ 8 border: 0; 9 border-left: 1px solid #dddddd; 10 border-right: 1px solid #dddddd; 11 height: 25px; 12 margin: 0; 13 padding: 0; 14 float: left; 15 } 16 .sp{ 17 display: inline-block; 18 height: 25px; 19 width: 25px; 20 line-height: 25px; 21 text-align: center; 22 float: left; 23 } 24 </style> 25 </head> 26 <body> 27 <div style="border: 1px solid #dddddd;display: inline-block"> 28 <div class="sp">-</div> 29 <input type="text" class="inp" /> 30 <div class="sp">+</div> 31 </div> 32 </body> 33 </html>
2.小尖角
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 display: inline-block; 9 border-right: solid 15px red; 10 border-left: solid 15px transparent; 11 border-top: solid 15px yellow; 12 border-bottom: solid 15px black; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="c1"></div> 18 </body> 19 </html>
3.伪类与常用后端模版样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*伪类清除漂浮*/ 8 .clearfix:after{ 9 content: '.'; 10 clear: both; 11 display: block; 12 visibility: hidden; 13 height: 0; 14 } 15 body{ 16 margin: 0; 17 } 18 .pg-header{ 19 height: 50px; 20 background-color: aqua; 21 } 22 .pg-body .body-menu{ 23 position: absolute; 24 top: 50px; 25 width: 200px; 26 left: 0; 27 bottom: 0; 28 background-color: red; 29 } 30 .pg-body .body-content{ 31 position: absolute; 32 top: 50px; 33 left: 210px;; 34 right: 0; 35 bottom: 0; 36 background-color: yellow; 37 overflow: auto; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="pg-header"></div> 43 <div class="pg-body"> 44 <div class="body-menu"> 45 46 </div> 47 <div class="body-content"> 48 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 49 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 50 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 51 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 52 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 53 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 54 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 55 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 56 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 57 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 58 aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/> 59 </div> 60 </div> 61 <div class="pg-footer"></div> 62 </body> 63 </html>