|
使用自定義圓點(diǎn)符號(hào)來(lái)完成自己的想象
或許你想要在清單里保留小圓點(diǎn)符號(hào),但是不想用瀏覽器無(wú)趣的默認(rèn)設(shè)置,更像用自己的小圓點(diǎn)圖案.有兩種方法可以達(dá)成你想要的 — 而我更推崇第二種方法,因?yàn)樗梢栽诟鞣N瀏覽器之間更好的兼容.
第一種方法是用 list-style-image 屬性來(lái)指定用來(lái)替代默認(rèn)小圓點(diǎn)的圖片名稱(chēng).
ul{
list-style-image:url(i_hot.gif)
}
這是最簡(jiǎn)單的方法,但是它會(huì)在不同瀏覽器之間的圖片垂直對(duì)齊位置上有所不同,有些瀏覽器會(huì)把圖片和項(xiàng)目文字中線(xiàn)對(duì)齊,也有的會(huì)把圖片放得稍微高一點(diǎn),它們之間有一點(diǎn)不一致.
為了避免 list-style-image 造成的幾個(gè)流行瀏覽器之間的對(duì)齊問(wèn)題,我比較喜歡用一種替代方法:把圖片作為每個(gè)<li>元素的背景.
首先,我們要去掉默認(rèn)的圓點(diǎn),然后再加上我們自己的背景圖片:
ul{
list-style:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}
no-repeat 會(huì)告訴瀏覽器不把背景圖片進(jìn)行平鋪操作(默認(rèn)會(huì)平鋪),而0 50%會(huì)告訴瀏覽器把背景圖片放置在距離左邊 0 像素,距離上面 50% 的地方,讓背景圖片 i_hot.gif 根據(jù)中線(xiàn)對(duì)齊.我們也可以用精確的像素來(lái)指定位置,比如說(shuō) 0 6px 會(huì)讓圖片放置在距離左邊0像素,距離上面 6 像素的位置上.
我們還要在清單項(xiàng)目的左邊加上17像素的內(nèi)補(bǔ)丁(padding),以便我們把寬20像素高11像素的圖片能夠完整顯示出來(lái),同時(shí)又留有一點(diǎn)空白,而不會(huì)和文字有重疊.這些數(shù)據(jù)應(yīng)該根據(jù)你所使用的圖片尺寸進(jìn)行調(diào)整( 圖 1 - 6 )
圖 1 - 6 自定義圓點(diǎn)圖片的清單
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 標(biāo)記語(yǔ)言——清單 [7] 下一頁(yè) 標(biāo)記語(yǔ)言——清單 [9]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 8 頁(yè) 標(biāo)記語(yǔ)言——清單 [8]
