使用div线性布局是常用的一种布局方式，就是把网页分成几个区域块，从上至下，依次填写内容，一般分为首部区域、广告区域、内容区域、底部区域，请看下图演示：
工具/原料
1
前端工具HBuilder
2
浏览器
方法/步骤
1
首先在body里写上4个div，因为他们等级是相同的，所以不需要嵌套，代码如下：
首部
广告区
内容区
页面底部
默认没有样式，效果如下：2
我们给所有的盒子加上通用的类样式box
首部
内容区
3
然后设置box的宽度为200px,实际开发中根据需要来设置（常用的是1200px左右），设置背景颜色为#eee,边框为红色虚线，代码如下： .box { width: 200px; background-color: #eee; border: 1px dashed red; margin: 0 auto; }
4
下面我们给4个区域块分别添加高度，并设置上下间距，这样使每个区域之间留点距离，更美观一些，代码如下： .gcs-top { height: 50px; } .gcs-banner { height: 120px; margin: 5px auto; } .gcs-main { height: 200px; } .gcs-footer { height: 60px; margin: 5px auto 0; }效果图如下：
5Document
下面提供完整的页面代码如下：
首部
内容区
上一篇：怎么样学习好CSS布局？
下一篇：页面布局相关CSS样式