1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>PC端常用布局--->版心</title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         
14         .top,
15         .banner,
16         .main,
17         .footer {
18             width: 1200px;
19             margin: 0 auto;
20             border: 1px dashed #cccccc;
21             text-align: center;
22         }
23         
24         .top {
25             height: 120px;
26             background: blueviolet;
27         }
28         
29         .banner {
30             height: 150px;
31             background: pink;
32         }
33         
34         .main {
35             height: 400px;
36             background: mediumaquamarine;
37         }
38         
39         .footer {
40             height: 180px;
41             background: salmon;
42         }
43     </style>
44 </head>
45 
46 <body>
47     <!-- 版心  浏览器窗口中水平显示.常见的960px 980px 1000px1200px -->
48     <!-- 布局流程 :
49          (1) :确定页面的版心 
50          (2) :分析页面中的行模块,以及每个行模块中的列模块
51          (3) :制作html结构
52          (4) :css初始化 ,然后开始运用盒子模型的原理 ,通过div +css 布局 来控制
53          网页的各个模块
54   
55 -->
56     <div class="top">top</div>
57     <div class="banner"> banner</div>
58     <div class="main">main</div>
59     <div class="footer">footer</div>
60 
61 </body>
62 
63 </html>