明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

自定義下文項(xiàng)符號list-style-image詳細(xì)說明

發(fā)表時(shí)間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于自定義列表項(xiàng)符號list-style-image詳解，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。一、list-style-image屬性不管是有序列表，還是無序列表，都有它們自身的列表項(xiàng)符號。但是默認(rèn)的列表項(xiàng)符號都比較丑，那如果我們想自定義列表項(xiàng)符...
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于自定義列表項(xiàng)符號list-style-image詳解，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。

一、list-style-image屬性

不管是有序列表，還是無序列表，都有它們自身的列表項(xiàng)符號。但是默認(rèn)的列表項(xiàng)符號都比較丑，那如果我們想自定義列表項(xiàng)符號，那該怎么實(shí)現(xiàn)呢？

在CSS中，我們可以使用list-style-image屬性來自定義列表項(xiàng)符號。

語法：

list-style-image:url(圖像地址);

說明：

圖像地址可以是相對地址，也可以是絕對地址。【推薦閱讀：html中相對定位與絕對定位】

舉例：

我們把下面這個(gè)小圖標(biāo)自定義為列表項(xiàng)符號：

微信截圖_20181112161253.png

例如：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>list-style-image屬性</title>
    <style type="text/css">
        ul{list-style-image:url("http://img.php.cnhttp://img6-2.22122511.com/upload/web_2/9-3-1.png");}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

效果如下：

微信截圖_20181112161721.png

以上就是對自定義列表項(xiàng)符號list-style-image詳解的全部介紹，如果您想了解更多有關(guān)Html5教程，請關(guān)注PHP中文網(wǎng)。

以上就是自定義列表項(xiàng)符號list-style-image詳解的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。