CSS是層疊樣式表的縮寫(xiě)，通過(guò)CSS可以實(shí)現(xiàn)許多前端效果。比如，我們可以把無(wú)序列表（ul）的小黑點(diǎn)換成自己想要的圖片。

如下是一個(gè)示例的HTML代碼，其中的li節(jié)點(diǎn)使用了無(wú)序列表：

<ul>
<li>一號(hào)列表項(xiàng)</li>
<li>二號(hào)列表項(xiàng)</li>
<li>三號(hào)列表項(xiàng)</li>
</ul>

首先，需要定義一個(gè)指向我們想要使用的圖片的相對(duì)路徑。在這個(gè)示例中，圖片名為“dot.png”，存放在名為“images”的文件夾中：

ul { 
list-style: none; /* 去掉默認(rèn)樣式 */
}
li {
padding-left: 20px; /* 設(shè)置左側(cè)間距 */
background: url("images/dot.png") no-repeat left center; /* 設(shè)置背景圖 */
background-size: 18px; /* 圖片大小 */
}

其中，我們使用了CSS的background屬性。在這里，background設(shè)置了背景圖片、圖片的顯示位置（left, center）、圖片大小（background-size）等信息，可以根據(jù)實(shí)際需要進(jìn)行調(diào)整。

下面是運(yùn)行結(jié)果，列表項(xiàng)的小黑點(diǎn)被我們定義好的圖片替換了：

• 一號(hào)列表項(xiàng)
• 二號(hào)列表項(xiàng)
• 三號(hào)列表項(xiàng)

在實(shí)際開(kāi)發(fā)中，我們也可以使用Base 64編碼等方式將圖片編碼進(jìn)CSS代碼中，以避免額外的HTTP請(qǐng)求。

總之，使用CSS讓列表項(xiàng)的小黑點(diǎn)變成我們自己設(shè)計(jì)的圖片，不僅可以提升網(wǎng)頁(yè)的美觀程度，也可以實(shí)現(xiàn)更多有趣的效果。多加練習(xí)吧！