div頁面布局是一種常見的網頁布局方式，它通過使用HTML中的div元素和CSS樣式來實現網頁的結構和排版。div頁面布局具有簡單、靈活、易于維護等特點，已成為前端開發中最常用和推崇的頁面布局方式之一。
在div頁面布局中，頁面內容被劃分為不同的區塊，每個區塊由一個或多個div元素組成，通過CSS樣式來設置區塊的大小、位置和樣式。通過合理的設置和組織各個區塊，可以實現各種不同的頁面布局效果。
下面通過幾個代碼案例來詳細解釋div頁面布局的使用。
案例一：簡單的兩欄布局 在這個例子中，我們將頁面劃分為左右兩欄，左側欄寬度為200px，右側欄占剩余空間。代碼如下：

<div class="container">
<div class="left-sidebar">左側欄</div>
<div class="content">右側內容</div>
</div>

.container {
width: 100%;
display: flex;
}
<br>
.left-sidebar {
width: 200px;
}
<br>
.content {
flex-grow: 1;
}

在上述代碼中，通過設置容器div的display屬性為flex，使其內部的元素可以通過flex布局來排列。左側欄通過設置寬度為固定值200px，右側內容通過設置flex-grow屬性為1，占據剩余的空間。
案例二：多欄等高布局 在這個例子中，我們需要實現多欄等高布局，即無論內容的高度如何變化，所有欄目的高度都能保持一致。代碼如下：

<div class="container">
<div class="left-sidebar">左側欄</div>
<div class="middle-content">中間內容</div>
<div class="right-sidebar">右側欄</div>
</div>

.container {
display: flex;
}
<br>
.left-sidebar, .middle-content, .right-sidebar {
flex-grow: 1;
}
<br>
.left-sidebar, .right-sidebar {
background-color: #ccc;
}
<br>
.middle-content {
background-color: #f2f2f2;
}

在上述代碼中，我們將容器div和三個欄目div都設置為flex布局，并且通過設置flex-grow屬性為1，讓欄目根據剩余的空間平均分配。左側欄和右側欄通過設置背景色來區分，中間內容欄設置不同的背景色。
案例三：響應式布局 在這個例子中，我們需要實現一個適應不同屏幕尺寸的響應式布局，包括移動設備和桌面設備。代碼如下：

<div class="container">
<div class="header">頭部</div>
<div class="content">內容</div>
<div class="sidebar">側邊欄</div>
<div class="footer">底部</div>
</div>

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas: 
"header"
"content"
"sidebar"
"footer";
}
<br>
.header { grid-area: header; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

在上述代碼中，我們使用CSS中的grid布局來實現響應式布局。通過設置grid-template-columns和grid-template-rows屬性來定義不同欄目的大小，通過grid-template-areas屬性來指定欄目的位置關系。
以上就是div頁面布局的一些常見案例，通過使用HTML中的div元素和CSS樣式，我們可以輕松實現各種復雜的頁面布局效果。div頁面布局具有靈活性和易維護性，是現代前端開發中不可或缺的技術之一。無論是簡單的兩欄布局、多欄等高布局還是響應式布局，都可以通過div頁面布局來輕松實現。