在網(wǎng)頁設計中，CSS使用list-style-image屬性來定義項目的圖片符號樣式。
用法如下：
list-style-image : none | url ( url )
在網(wǎng)站建設時，其作用是給列表添加項目圖片，其中url是圖片的路徑，可以是絕對路徑，也可以是相對路徑。
【示例】啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，輸入以下內(nèi)容：
<h2>京郊采摘好去處</h2>
<ul>
<li>順義大胡子采摘園</li>
<li>靜逸清農(nóng)業(yè)生態(tài)觀光園</li>
<li>英龍果園</li>
<li>永新源生態(tài)農(nóng)業(yè)有限公司</li>
<li>金海湖觀光采摘園</li>
</ul>
在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式，用來定義列表項目圖片樣式。
ul{ /*列表樣式*/
color:#CC0000;
list-style-image:url(icon.jpg); /*項目符號圖片*/}
以上代碼中，定義了項目圖片。
提示：在設計網(wǎng)頁時，為了添加定制的列表符號，可以使用list-style(-?)image屬性。但是，這種方法對符號圖像的位置的控制能力不強。更常用的方法是關(guān)閉列表符號，并且將定制的符號作為背景添加在列表元素上。然后可以使用背景圖像的定位屬性精確地控制定制符號的對準方式。
IE和Opera使用左空白邊控制列表的縮進，而Safari和Firefox選擇使用左填充。因此，首先需要將列表的空白邊（margin）和填充（padding）設置為零，從而去掉這個縮進。要去掉默認的符號，只需將列表樣式類型設置為none。
ul {
margin:0;
padding:0;
list-style-type:none;}
添加定制的符號非常簡單。在列表項左邊添加填充，為符號留出所需的空間。然后將符號圖像作為背景圖像應用于列表項。如果列表項跨越多行，你可能希望將符號放在接近列表項頂部的位置。但是，如果知道列表項的內(nèi)容不會跨越多行，那么可以將垂直位置設置為middle或50%，從而讓符號垂直居中。
li{
background: url(icon.jpg) no-repeat 0 50%; padding-left:30px;}
當前文章標題：在網(wǎng)頁設計中自定義項目符號
當前URL：http://m.supportcoffeeroasters.com/news/wzzz/3089.html
