<div> 頁面布局是指將網頁中的元素按照一定的規則排列和組合，以達到用戶友好和美觀的效果。在網頁開發中，使用<div> 標簽來創建一個塊級元素，它可以包含其他 HTML 元素，且可以通過 CSS 樣式來控制元素的位置、大小和樣式。下面將通過幾個代碼案例來詳細說明<div> 頁面布局的應用方法和效果。
第一個例子中，我們將使用<div> 標簽來實現一個經典的兩欄布局，其中左側是一個定寬度的導航欄，右側是主要內容區域。CSS 方式如下：

<code>
<style>
.left {
width: 200px;
background-color: lightgray;
float: left;
}
.right {
margin-left: 220px;
background-color: white;
}
</style>
</code>

HTML 方式如下：

<code>
<div class="left">
<p>導航欄</p>
</div>
<div class="right">
<p>主要內容區域</p>
</div>
</code>

在這個例子中，我們使用了兩個<div> 元素來分別表示導航欄和主要內容區域。通過設置樣式屬性，我們將導航欄固定在左側并設置了固定的寬度，而將主要內容區域向右移動并撐滿整個剩余空間。這樣就實現了一個簡單的兩欄布局。
第二個例子中，我們將使用<div> 標簽來實現一個響應式的三欄布局，其中左側和右側的欄目寬度固定，中間的欄目寬度是自適應的，會根據瀏覽器窗口的寬度來自動調整。CSS 方式如下：

<code>
<style>
.left {
width: 200px;
background-color: lightgray;
float: left;
}
.right {
width: 200px;
background-color: lightgray;
float: right;
}
.center {
margin: 0 220px;
background-color: white;
}
</style>
</code>

HTML 方式如下：

<code>
<div class="left">
<p>左側欄目</p>
</div>
<div class="center">
<p>中間欄目</p>
</div>
<div class="right">
<p>右側欄目</p>
</div>
</code>

在這個例子中，我們使用了三個<div> 元素來分別表示左側欄目、中間欄目和右側欄目。通過設置樣式屬性，我們將左側欄目固定在左側、右側欄目固定在右側，并將中間欄目的左右邊距設置為左側和右側欄目的寬度之和。這樣就實現了一個響應式的三欄布局，當瀏覽器窗口變窄時，中間欄目會自動調整寬度以適應。