CSS中的div三段布局是一個常見的頁面布局方式。這種布局方式通常被用來將網頁分成三個不同的部分：頂部、中部和底部。下面我們將逐步介紹如何使用CSS來實現這種布局。

/* 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容器進行更加詳細的定制，使頁面呈現出更加美觀而且合理的布局效果。