在網(wǎng)頁(yè)設(shè)計(jì)中，CSS使用list-style-image屬性來(lái)定義項(xiàng)目的圖片符號(hào)樣式。
用法如下：
list-style-image : none | url ( url )
在網(wǎng)站建設(shè)時(shí)，其作用是給列表添加項(xiàng)目圖片，其中url是圖片的路徑，可以是絕對(duì)路徑，也可以是相對(duì)路徑。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為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>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，用來(lái)定義列表項(xiàng)目圖片樣式。
ul{ /*列表樣式*/
color:#CC0000;
list-style-image:url(icon.jpg); /*項(xiàng)目符號(hào)圖片*/}
以上代碼中，定義了項(xiàng)目圖片。
提示：在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，為了添加定制的列表符號(hào)，可以使用list-style(-?)image屬性。但是，這種方法對(duì)符號(hào)圖像的位置的控制能力不強(qiáng)。更常用的方法是關(guān)閉列表符號(hào)，并且將定制的符號(hào)作為背景添加在列表元素上。然后可以使用背景圖像的定位屬性精確地控制定制符號(hào)的對(duì)準(zhǔn)方式。
IE和Opera使用左空白邊控制列表的縮進(jìn)，而Safari和Firefox選擇使用左填充。因此，首先需要將列表的空白邊（margin）和填充（padding）設(shè)置為零，從而去掉這個(gè)縮進(jìn)。要去掉默認(rèn)的符號(hào)，只需將列表樣式類型設(shè)置為none。
ul {
margin:0;
padding:0;
list-style-type:none;}
添加定制的符號(hào)非常簡(jiǎn)單。在列表項(xiàng)左邊添加填充，為符號(hào)留出所需的空間。然后將符號(hào)圖像作為背景圖像應(yīng)用于列表項(xiàng)。如果列表項(xiàng)跨越多行，你可能希望將符號(hào)放在接近列表項(xiàng)頂部的位置。但是，如果知道列表項(xiàng)的內(nèi)容不會(huì)跨越多行，那么可以將垂直位置設(shè)置為middle或50%，從而讓符號(hào)垂直居中。
li{
background: url(icon.jpg) no-repeat 0 50%; padding-left:30px;}
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中自定義項(xiàng)目符號(hào)
當(dāng)前URL：http://supportcoffeeroasters.com/news/wzzz/3089.html
