index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子的模型</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="top"> 10 <div class="top_content"></div> 11 </div> 12 <div class="body"> 13 <div class="body_img"></div> 14 <div class="body_content"> 15 <div class="body_no"></div> 16 </div> 17 </div> 18 <div class="footing"> 19 <div class="footing_content"></div> 20 <div class="footing_sub"></div> 21 </div> 22 </body> 23 </html>
style.css
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 .top{ 6 width: 100%; 7 height: 50px; 8 background-color: black; 9 } 10 .top_content{ 11 width: 75%; 12 height: 50px; 13 margin: 0px auto; 14 background-color: blue; 15 } 16 .body{ 17 margin: 20px auto; 18 width: 75%; 19 height: 1500px; 20 background-color: darkgray; 21 } 22 .body_img{ 23 width: 100%; 24 height: 400px; 25 background-color: darkcyan; 26 } 27 .body_content{ 28 width: 100%; 29 height: 1100px; 30 background-color: cornflowerblue; 31 } 32 .body_no{ 33 width: auto; 34 height: 50px; 35 background-color: aqua; 36 } 37 .footing{ 38 width: 75%; 39 height: 400px; 40 background-color: gold; 41 margin: 0px auto; 42 } 43 .footing_content{ 44 width: 100%; 45 height: 350px; 46 background-color: darkseagreen; 47 } 48 .footing_sub{ 49 width: 100%; 50 height: 50px; 51 background-color: black; 52 }