|
自定義圓點(diǎn)符號(hào)
去掉預(yù)設(shè)的樣式,并且使用background屬性為第三層項(xiàng)目加上裝飾性的圓點(diǎn)符號(hào).首先為所有<li>標(biāo)簽去掉預(yù)設(shè)的清單樣式,接著再為第三層項(xiàng)目指定內(nèi)鏡圖片.為了進(jìn)一步區(qū)別,也將為第三層設(shè)定font-weight:normal -- 覆蓋掉清單的bold設(shè)定值.
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li {
list-style: none; /* turns off bullets */
}
#sitemap li ul {
font-size: 90%;
color: #000;
}
/* 第三層 */
#sitemap li ul li ul li {
font-weight: normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
圖9-3是完成的網(wǎng)站地圖,在第三層<li>標(biāo)簽上使用了自定義圓點(diǎn)符號(hào),普通字體.在左邊加上了16像素的內(nèi)補(bǔ)丁,以便留下裝飾用圓點(diǎn)圖片的顯示位置(同時(shí)也多留了一些空白).也告訴瀏覽器從左邊0像素,上方50%開(kāi)始顯示圖片,這基本上會(huì)使圖片左側(cè)對(duì)齊,并對(duì)齊文字中線.雖然我們能在此以像素指定垂直對(duì)齊,但是以百分比制定的話,在文字大小改變時(shí),圓點(diǎn)圖片仍能維持正確的排列效果.
圖9-3 第三層項(xiàng)目加上自定義圓點(diǎn)小圖片
加上邊框
接著在第二層清單的左邊加上點(diǎn)狀邊框,完成我們的網(wǎng)站地圖,這能進(jìn)一步提示讀者頂層項(xiàng)目有屬于它的子項(xiàng)目.
為了只在第二層清單達(dá)成這個(gè)效果,將加上這些規(guī)則:
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li {
list-style: none; /* turns off bullets */
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
font-size: 90%;
color: #000;
border-left: 1px dotted #999;
}
/* for third-level */
#sitemap li ul li ul {
border: none;
}
#sitemap li ul li ul li {
font-weight: normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50%;
}
我們稍微調(diào)整了第二層的外補(bǔ)丁,并且加上了點(diǎn)狀邊線,在這個(gè)規(guī)則之后,再使用border:none;來(lái)去掉第三層的邊框.
圖9-4是改好字體,邊框與圖片的清單效果.
圖9-4 完成的清單樣式,第二層加上點(diǎn)狀邊線
在設(shè)計(jì)大綱之類的清單時(shí),嵌套<ul>是個(gè)結(jié)構(gòu)恰當(dāng),容易指定樣式的解決方法.為頂層<ul>指定獨(dú)特的id滯后,我們能把分別制定每層樣式的任務(wù)交給CSS進(jìn)行,而不需要加上多余的顯示效果標(biāo)簽.而設(shè)計(jì)樣式的可能性也遠(yuǎn)超出這個(gè)簡(jiǎn)單的示例.
圖9-5是相同的CSS應(yīng)用在稍大型網(wǎng)站地圖上的效果,由于CSS根據(jù)層級(jí)指定樣式,因此標(biāo)簽內(nèi)容的寫法完全相同,項(xiàng)目會(huì)隨著嵌套狀層級(jí)不同而自動(dòng)選用適當(dāng)?shù)臉邮?
圖9-5 以CSS與嵌套狀清單制作的網(wǎng)站地圖擴(kuò)充版
結(jié)論
在本章開(kāi)頭,我們探索了兩個(gè)精簡(jiǎn)標(biāo)簽源代碼的做法,一個(gè)是使用繼承選擇器,另一個(gè)是扔掉多余的<div>標(biāo)簽.
集成選擇器不必使用多余,容易讓標(biāo)記源代碼變得難以閱讀的分類屬性,同時(shí)移除直接內(nèi)涵唯一性塊級(jí)元素的<div>標(biāo)簽?zāi)茏屛覀儽M可能的節(jié)省字節(jié),還能讓構(gòu)建復(fù)雜版面的源代碼更加簡(jiǎn)單.
使用這些做法看起來(lái)只能省下幾個(gè)字節(jié),但是開(kāi)始對(duì)整個(gè)網(wǎng)站應(yīng)用這些做法之后,節(jié)省的成果就開(kāi)始積累,你可以把它當(dāng)成另一種編寫靈活,結(jié)構(gòu)化標(biāo)記的好工具.
除了精簡(jiǎn)標(biāo)簽源代碼外,我們還看了繼承選擇器如何為使用嵌套狀清單的網(wǎng)站地圖指定樣式,你能為每一層級(jí)大綱指定獨(dú)特的樣式,而不必使用額外的分類屬性,再次節(jié)省幾個(gè)字節(jié),同時(shí)讓未來(lái)更新,重新設(shè)計(jì)樣式的工作更加輕松.
精簡(jiǎn)標(biāo)簽代碼萬(wàn)歲!
下文：Chapter 10 應(yīng)用CSS
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2824249-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2008/5926.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [5] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 6 頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [6]
