CSS盒子模型

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 }

 

posted @ 2020-03-21 15:17  组装梦想  阅读(123)  评论(0)  编辑  收藏  举报