在CSS中,我們可以使用list-style-image
屬性在li元素中放置圖標(biāo),這個(gè)屬性允許我們?yōu)榱斜眄?xiàng)設(shè)置圖像作為標(biāo)記。
如果我們有一個(gè)HTML列表:
<ul> <li>項(xiàng)目1</li> <li>項(xiàng)目2</li> <li>項(xiàng)目3</li> </ul>
我們可以使用CSS的list-style-image
屬性為列表項(xiàng)添加圖標(biāo):
ul li { list-style-image: url('icon.png'); }
在這個(gè)例子中,url('icon.png')
是圖標(biāo)的URL,可以根據(jù)實(shí)際情況替換,這個(gè)CSS規(guī)則會(huì)將ul
元素下的所有li
元素的標(biāo)記設(shè)置為指定的圖標(biāo)。
這種方法要求圖標(biāo)文件在服務(wù)器上可用,并且URL路徑正確,如果圖標(biāo)文件不在服務(wù)器上,或者URL路徑錯(cuò)誤,那么這個(gè)規(guī)則將不會(huì)生效。
list-style-image
屬性還支持一些其他值,例如none
和initial
,這些值可以用來(lái)重置或隱藏列表項(xiàng)的標(biāo)記。
ul li { list-style-image: none; }
這個(gè)規(guī)則會(huì)隱藏所有ul
元素下的li
元素的標(biāo)記。