在網(wǎng)頁設(shè)計(jì)中,CSS使用list-style-image屬性來定義項(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)頁,保存為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)部樣式表,然后輸入下面樣式,用來定義列表項(xiàng)目圖片樣式。
ul{ /*列表樣式*/
color:#CC0000;
list-style-image:url(icon.jpg); /*項(xiàng)目符號(hào)圖片*/}
以上代碼中,定義了項(xiàng)目圖片。
提示:在設(shè)計(jì)網(wǎng)頁時(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)非常簡單。在列表項(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)頁設(shè)計(jì)中自定義項(xiàng)目符號(hào)
當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/3089.html