1、首先在body里写上4个div，因为他们等级是相同的，所以不需要嵌套，代码如下：<body> <div >首部</div> <div >广告区</div> <div >内容区</div> <div >页面底部</div> </body>默认没有样式，效果如下：
2、我们给所有的盒子加上通用的类样式box <div class="gcs-top box">首部</div>稆糨孝汶; <div class="gcs-banner box">广告区</div> <div class="gcs-main box">内容区</div> <div class="gcs-footer box">页面底部</div>
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; }效果图如下：
5、下面提供完整的页面代码如下：<!DOCTYPE html><html><head>&造婷用痃lt;meta charset="UTF-8"><title>Document</title><style>.box { width: 200px; background-color: #eee; border: 1px dashed red; margin: 0 auto;}.gcs-top { height: 50px;}.gcs-banner { height: 120px; margin: 5px auto;}.gcs-main { height: 200px;}.gcs-footer { height: 60px; margin: 5px auto 0;}</style></head><body> <div class="gcs-top box">首部</div> <div class="gcs-banner box">广告区</div> <div class="gcs-main box">内容区</div> <div class="gcs-footer box">页面底部</div></body></html>