在網(wǎng)頁(yè)設(shè)計(jì)中，列表是一個(gè)很常見(jiàn)的元素。我們可以使用CSS為列表添加樣式，使其更加美觀和易于閱讀。本文將介紹如何使用CSS為列表添加帶圖片的樣式。

// HTML代碼
<ul id="list">
<li><img src="image1.jpg" alt="image1">列表項(xiàng)1</li>
<li><img src="image2.jpg" alt="image2">列表項(xiàng)2</li>
<li><img src="image3.jpg" alt="image3">列表項(xiàng)3</li>
<li><img src="image4.jpg" alt="image4">列表項(xiàng)4</li>
</ul>

上面是示例的HTML代碼，其中每個(gè)列表項(xiàng)都包含一個(gè)圖片和一個(gè)文本。接下來(lái)，使用CSS對(duì)列表進(jìn)行樣式設(shè)置。

// CSS代碼
#list {
list-style: none;
margin: 0;
padding: 0;
}
#list li {
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f5f5f5;
}
#list li img {
float: left;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
}
#list li:hover {
background-color: #e9e9e9;
}

上述CSS代碼中，為列表和列表項(xiàng)設(shè)置了一些基本樣式，包括去掉默認(rèn)樣式、內(nèi)外邊距為0、邊框圓角、背景色等等。圖片使用了浮動(dòng)和圓角樣式，整個(gè)列表項(xiàng)的鼠標(biāo)懸停時(shí)變色。你可以根據(jù)自己的需要，根據(jù)實(shí)際情況修改CSS樣式。

通過(guò)上述的代碼和說(shuō)明，相信你已經(jīng)掌握了如何使用CSS為列表添加帶圖片的樣式。讓你的列表更加出彩吧！