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

CSS 列表標記的圖像list-style-image

提問人：劉團圓發(fā)布時間：2020-11-18

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

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

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

    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>默認的列表標記</p>

<ul>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ul>

<hr/>

<p>使用list-style-image屬性的列表標記</p>

<ol>

<li>items1</li>

<li>items2</li>

<li>items3</li>

<li>items4</li>

</ol>

</body>

</html>

image.png

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

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