/* CSS代码开始 */
/* 通用样式 */
/* 设置所有元素的边框 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
/* 为body设置基本样式 */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #F7F7F7;
}
/* 定义div布局 */
/* 定义顶部容器 */
.top {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 定义中部容器 */
.middle {
background-color: #fff;
padding: 20px;
}
/* 定义底部容器 */
.bottom {
background-color: #333;
color:#fff;
padding: 20px;
text-align: center;
}
/* CSS代码结束 */

以上是大家定义的基本样式和div布局。大家先为三个div容器分别设置背景颜色、字体颜色和padding（内边距）值。其中顶部和底部容器还设置了文本居中的样式。

页面头部
这是一个网页头部
页面主体
这是一个网页主体
页面底部
这是一个网页底部

HTML代码中，大家使用三个div容器分别包含了页面的三个部分。使用CSS样式表中定义的类名 .top、.middle和.bottom 来设置各个div容器的样式。

以上就是使用CSS实现div三段布局的方法了。实际应用中，大家可以根据实际情况对每个div容器进行更加详细的定制，使页面呈现出更加美观而且合理的布局效果。