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