|
技巧延伸
讓我們利用我們構(gòu)造出來(lái)的食品清單來(lái)試看看幾種用定義css樣式的方法,我們將拋開預(yù)設(shè)樣式,加入自定義的圓點(diǎn)符號(hào),接著把它轉(zhuǎn)成橫向,把它變作一個(gè)導(dǎo)航條.
扔掉圓點(diǎn)
"我真的不喜歡食品清單里的那些個(gè)小圓點(diǎn),我想我還是用回<br />吧."
不需要回到老習(xí)慣 — 我們?nèi)匀豢梢允褂梦覀兘Y(jié)構(gòu)化的無(wú)序清單,然后使用css關(guān)閉掉小圓點(diǎn)符號(hào)和行內(nèi)縮進(jìn),關(guān)鍵在于我們保留了清單的結(jié)構(gòu),然后以css具體的呈現(xiàn)出來(lái).
首先,加上一段去掉圓點(diǎn)符號(hào)的css規(guī)則:
ul{
list-style:none;
}
顯示的結(jié)果見(jiàn)圖1 - 4
圖 1 - 4 去掉小圓點(diǎn)符號(hào)
接著我們來(lái)去掉行內(nèi)縮進(jìn),根據(jù)預(yù)設(shè)值,所有無(wú)序清單左邊都會(huì)留有一些內(nèi)補(bǔ)丁(padding),但是不用擔(dān)心,我們可以隨心所欲的裁掉:
ul{
list-style:none;
padding-left:0;
}
顯示結(jié)果可見(jiàn)圖1 - 5
圖 1 - 5
雖然圖 1 - 5 看起來(lái)和使用了幾個(gè)<br />標(biāo)簽的效果幾乎一樣,但是它還是符合標(biāo)準(zhǔn)的,結(jié)構(gòu)化的無(wú)序列表 — 不管什么瀏覽器,設(shè)備都能正常顯示,如果必要的話只需要更新幾條css規(guī)則就能換上不同的樣式了.
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 標(biāo)記語(yǔ)言——清單 [6] 下一頁(yè) 標(biāo)記語(yǔ)言——清單 [8]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 7 頁(yè) 標(biāo)記語(yǔ)言——清單 [7]
