位置：首頁(yè) > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 列表標(biāo)記的圖像list-style-image

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

    雖然css已經(jīng)預(yù)設(shè)了很多列表標(biāo)記的樣式，但是有時(shí)候還想自定義一些樣式，比如需要一張圖片來(lái)作為列表的標(biāo)記。此時(shí)CSS列表樣式準(zhǔn)備了一個(gè)可以自定義列表標(biāo)記圖案的屬性——list-style-image0

    list-style-image屬性使用圖像替換列表項(xiàng)的標(biāo)記。這個(gè)屬性指定作為一個(gè)有序或無(wú)序列表項(xiàng)標(biāo)志的圖像。圖像相對(duì)于列表項(xiàng)內(nèi)容的放置位置通常使用list-style-position屬性控制。

    使用這個(gè)屬性需要一張可以作為列表標(biāo)記的圖片，之后只需要按照此屬性的語(yǔ)法正常引入圖片的路徑即可，語(yǔ)法如下：

    list - style - image:url();

    【例題】使用list-style-image屬性

    代碼如下：

<!DOCTYPDE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.ol{

list-style-image:url(icon.png);

}

</style>

</head>

<body>

<p>默認(rèn)的列表標(biāo)記</p>

<ul>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

<hr/>

<p>使用list-style-image屬性的列表標(biāo)記</p>

<ol>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ol>

</body>

</html>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部