DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 9.3 自定義列表項符號list-style-image
9.3 自定義列表項符號list-style-image
編輯:CSS基礎知識     

一、list-style-image屬性

不管是有序列表,還是無序列表,都有它們自身的列表項符號。但是默認的列表項符號都比較丑,那如果我們想自定義列表項符號,那該怎麼實現呢?

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

語法:

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

說明:

圖像地址可以是相對地址,也可以是絕對地址。請查看“相對路徑和絕對路徑”

舉例:

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

在線測試
 
<!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("../App_images/lesson/run_cj/list.png");}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

在浏覽器預覽效果如下:

分析:

自定義列表項符號,實際上就是列表項符號改為一張圖片,而引用一張圖片就要給出它的引用路徑。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved