<div> + CSS例子
<div>是HTML中最常用的標簽之一，它用于創建網頁中的容器，類似于一個“盒子”，可以用來包裹其他元素，如文本、圖片、表格等。CSS（層疊樣式表）用于為HTML文檔添加樣式和布局。通過將<div>標簽與CSS配合使用，我們可以創建各種各樣的網頁布局效果，從而使網頁更加美觀和有吸引力。
讓我們通過幾個代碼案例來詳細解釋<div>和CSS的使用。
代碼案例1：

<div>
<p>這是一個<div>示例。</p>
</div>

在這個例子中，我們創建了一個<div>容器，并在其中放置了一個段落（

）元素。通過CSS樣式，我們可以給<div>容器添加背景色、邊框等效果，從而使這段文字更加突出。
代碼案例2：

<div class="container">
<p>這是一個具有自定義樣式的<div>示例。</p>
</div>
<br>
<style>
.container {
background-color: #f2f2f2;
padding: 10px;
border: 1px solid #ccc;
}
</style>

在這個例子中，我們給<div>容器添加了一個名為“container”的類名，并在CSS樣式中定義了.container類的樣式。通過這個樣式，我們可以給<div>容器添加背景顏色、內邊距和邊框。通過使用類選擇器，我們可以在同一個網頁中的多個<div>容器中使用相同的樣式，從而提高代碼的重用性。
代碼案例3：

<div id="header">
<h1>網頁標題</h1>
</div>
<br>
<style>
#header {
background-image: url("header.png");
background-size: cover;
height: 200px;
text-align: center;
}
<br>
#header h1 {
color: white;
padding-top: 80px;
}
</style>

在這個例子中，我們給<div>容器添加了一個唯一的id屬性，并通過CSS樣式對其進行定制化。我們給<div>容器添加了一個背景圖片，并設置了圖片的大小為封面大小。我們還設置了<div>容器的高度為200像素，并將其中的標題居中顯示，并且設置了標題的文本顏色和上邊距。
通過以上幾個代碼案例，我們可以看到，<div>和CSS的配合使用可以讓我們靈活地控制網頁布局和樣式。無論是用來創建簡單的容器，還是用來實現復雜的布局效果，<div>和CSS都是我們不可或缺的工具。希望通過這篇文章的介紹，讀者能夠對<div>和CSS的使用有更深入的理解，從而在開發網頁時能夠更加高效和靈活地運用它們。