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>
原文：https://www.cnblogs.com/yuanxiangguang/p/11319337.html