自定義列表項符號list-style-image有什么用

小編給大家分享一下自定義列表項符號list-style-image有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及假山制作等，在網(wǎng)站建設(shè)、全網(wǎng)整合營銷推廣、WAP手機網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

一、list-style-image屬性

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

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

語法：

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

說明：

圖像地址可以是相對地址，也可以是絕對地址。

舉例：

我們把下面這個小圖標自定義為列表項符號：

自定義列表項符號list-style-image有什么用

例如：

<!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("https://img.php.cn/upload/9-3-1.png");}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

效果如下：

自定義列表項符號list-style-image有什么用

以上是“自定義列表項符號list-style-image有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標題名稱：自定義列表項符號list-style-image有什么用
文章源于：http://bm7419.com/article32/ipogpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、軟件開發(fā)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)