<div> 是 HTML 中常用的標簽之一，它作為一個容器，可以將頁面中的內容劃分為不同的區塊，并為這些區塊添加樣式和布局。通過使用 CSS，我們可以對 <div> 標簽進行各種樣式的設置，從而實現頁面布局和設計的需求。接下來，我們將通過幾個實際的代碼案例來詳細解釋和說明如何使用 <div> 以及各種 CSS 屬性來進行頁面的設計和布局。
第一個案例是一個簡單的網頁布局，其中包含一個 header、一個 navigation 和一個 content 區塊。，我們需要在 HTML 文件中創建這些區塊的 <div> 標簽，并為它們分別添加相應的類名：header、navigation 和 content。然后，在 CSS 文件中，我們可以通過這些類名來設置它們的樣式和布局。以下是相應的代碼示例：

HTML:
<br>
<div class="header">
<h1>這是頁面的標題</h1>
</div>
<br>
<div class="navigation">
<ul>
<li>菜單項 1</li>
<li>菜單項 2</li>
<li>菜單項 3</li>
</ul>
</div>
<br>
<div class="content">
<p>這是頁面的內容。</p>
</div>
<br>
CSS:
<br>
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
<br>
.navigation {
background-color: #ccc;
padding: 10px;
}
<br>
.content {
background-color: #fff;
padding: 20px;
}

在這個示例中，我們為每個區塊設置了不同的背景顏色，并使用了不同的內邊距（padding）來為它們添加空白間距。其中，header 區塊使用了文本居中對齊（text-align: center）的樣式。通過對這些區塊的樣式設置，我們可以實現一個簡單的網頁布局。
第二個案例是一個相冊頁面布局示例，其中展示了多張圖片，并對圖片進行了樣式處理。我們可以通過 <div> 標簽和 CSS 來創建一個美觀的圖片展示頁面。以下是相應的代碼示例：

HTML:
<br>
<div class="gallery">
<div class="photo">
<img src="photo1.jpg" alt="Photo 1">
<p>這是 Photo 1 的描述</p>
</div>
<br>
    <div class="photo">
<img src="photo2.jpg" alt="Photo 2">
<p>這是 Photo 2 的描述</p>
</div>
<br>
    <div class="photo">
<img src="photo3.jpg" alt="Photo 3">
<p>這是 Photo 3 的描述</p>
</div>
</div>
<br>
CSS:
<br>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<br>
.photo {
text-align: center;
}
<br>
.photo img {
max-width: 100%;
height: auto;
}
<br>
.photo p {
margin-top: 10px;
}

在這個示例中，我們使用了 CSS 的網格布局（grid layout）來實現照片的展示。通過設置 <div class="gallery"> 的樣式為 display: grid，并使用 grid-template-columns 來定義網格的列數和寬度比例。我們還通過設置 gap 來定義網格之間的間距。每個照片都包裝在一個 <div class="photo"> 中，用于設置照片和描述的樣式。通過設置 img 的樣式，我們可以保持圖片的寬度不超過容器的寬度，并自動調整高度。此外，通過為描述的

元素設置 margin 來添加間距，以增強閱讀體驗。
通過以上的兩個案例，我們可以看到 <div> 標簽在頁面布局和設計中的重要性，并且與 CSS 結合使用可以實現豐富多樣的效果。希望這些示例能夠幫助您更好地理解并運用 <div> 和 CSS 進行頁面設計和布局。