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>
<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>
