<div 項目列表是HTML中一種常用的布局方式。它用來創建并排顯示多個項目的容器，可以用于展示產品列表、圖片集、新聞等各種項目。本文將通過幾個代碼案例詳細解釋div 項目列表的使用。

案例一：

假設我們需要展示一個商品列表，其中每個商品包含一個圖片和一個標題。

<div class="item">
<img src="product1.jpg" alt="Product 1">
<p class="title">Product 1</p>
</div>
<br>
<div class="item">
<img src="product2.jpg" alt="Product 2">
<p class="title">Product 2</p>
</div>
<br>
<div class="item">
<img src="product3.jpg" alt="Product 3">
<p class="title">Product 3</p>
</div>

上述代碼中，我們使用<div>標簽創建了一個稱為"item"的容器，每個容器表示一個商品。在每個容器中，我們放置了一個<img>標簽來顯示商品的圖片，以及一個

標簽來顯示商品的標題。通過添加class屬性，我們將每個容器樣式化，并實現其他的自定義效果。

案例二：

我們可以利用CSS來對div 項目列表進行樣式化，使其更加美觀和易讀。

<style>
.item {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.title {
font-weight: bold;
font-size: 16px;
}
</style>
<br>
<div class="item">
<img src="product1.jpg" alt="Product 1">
<p class="title">Product 1</p>
</div>
<br>
<div class="item">
<img src="product2.jpg" alt="Product 2">
<p class="title">Product 2</p>
</div>
<br>
<div class="item">
<img src="product3.jpg" alt="Product 3">
<p class="title">Product 3</p>
</div>

在上述代碼中，我們為"item"類添加了一些CSS樣式。我們為容器設置了邊框、圓角、內邊距和外邊距，使其具有更好的觀感。同時，我們還設置了標題的字體樣式，使其加粗并增大了字號。

案例三：

除了展示商品列表，div 項目列表還可以用于展示一組圖片集。

<div class="gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
</div>

上述代碼中，我們使用"class"屬性為容器添加了一個名為"gallery"的類。在這個容器中，我們放置了多個<img>標簽，每個標簽代表一張圖片。通過設置合適的樣式，我們可以為這些圖片創建一組漂亮的圖片集。

<div 項目列表是一種非常常見且實用的HTML布局方式。通過合理使用<div>標簽和CSS樣式，我們可以實現各種各樣的項目列表，展示出豐富的內容和更好的視覺效果。希望通過以上的案例，讀者對div 項目列表的使用有了更清晰的了解。