CSS無序列表為圖片代碼 CSS無序列表為圖片是一種常用的網站設計方法，在網頁中可以更好的突出列表項，增強頁面視覺效果。使用這種方法時，我們需要將列表項的樣式設置為圖片，下面我們來介紹一下如何實現。 首先，我們需要先準備好圖片資源，可以從圖片庫或自己設計制作。然后在HTML文檔中定義一個無序列表，使用

和

標簽將列表項置入其中，每個列表項使用

和

標簽定義。比如：

<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

接下來，在CSS中定義列表項樣式為圖片，可以使用background屬性，給每個列表項添加背景圖片。比如：

ul li {
background: url(images/item.png) no-repeat 0 0;
padding-left: 20px;
}

代碼中我們定義了每個列表項使用圖片“item.png”，并將背景圖片平鋪效果關閉，設置在0 0位置，然后為了不遮蓋文字內容，我們添加了20像素的左內邊距。 至此，我們已經實現了CSS無序列表為圖片的樣式設置，效果如下：

• 列表項1
• 列表項2
• 列表項3

若希望為每個列表項設置不同的圖片，可以使用CSS偽類:nth-of-type(n)來指定樣式，比如：

ul li:nth-of-type(1) {
background: url(images/item1.png) no-repeat 0 0;
}
ul li:nth-of-type(2) {
background: url(images/item2.png) no-repeat 0 0;
}
ul li:nth-of-type(3) {
background: url(images/item3.png) no-repeat 0 0;
}

代碼中我們為第一項設置背景圖片為“item1.png”，第二項為“item2.png”，第三項為“item3.png”。 綜上，使用CSS無序列表為圖片可以更好地展示網頁列表信息，通過對樣式設置的調整，可以使頁面更加美觀，也更加符合用戶的閱讀習慣。