CSS的unordered list和list item常常被用于顯示商品列表。一個典型的商品列表通常包含商品名稱、價格、圖片以及其他相關信息。下面的代碼展示了如何使用CSS樣式來優化一個簡單的商品列表。

<ul class="product-list">
<li class="product-item">
<img src="http://example.com/images/product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p class="price">$99</p>
<p class="description">Description of Product 1</p>
</li>
<li class="product-item">
<img src="http://example.com/images/product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p class="price">$129</p>
<p class="description">Description of Product 2</p>
</li>
<li class="product-item">
<img src="http://example.com/images/product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p class="price">$199</p>
<p class="description">Description of Product 3</p>
</li>
</ul>

以上的代碼顯示了一個簡單的商品列表，使用了unordered list和list item來布局。CSS樣式如下：

.product-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.product-item {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
text-align: center;
padding: 20px;
}
.product-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product-item h3 {
font-size: 1.2rem;
margin: 0;
}
.product-item .price {
font-weight: bold;
font-size: 1.4rem;
margin: 10px 0;
}
.product-item .description {
font-size: 1rem;
margin: 0;
}

以上CSS樣式定義了unordered list和每個list item的外觀。list-style-type屬性被設置為none，這樣在列表的每個項目前不會顯示任何符號。.product-item元素使用了flex布局，讓內容垂直居中。另外，陰影和邊框被添加以突出列表項。同時，商品名稱、價格和描述都被設置為相應的文本樣式，以便更好地展示商品信息。