|
方法B:有序清單
<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>
我確信這是大多數(shù)人選用的做法,但是這并不代表我們都沒有在某些情況下,因?yàn)槟撤N原因使用方法A.<ol>代表"有序清單"(ordered list),因此語義上我們使用了正確的元素解決手上的問題.方法B還有什么特別之處?
自動(dòng)編號(hào)
或許你發(fā)現(xiàn)我們不必手動(dòng)為每個(gè)清單項(xiàng)目加上編號(hào)了,在使用了<ol>時(shí),會(huì)自動(dòng)依照順序產(chǎn)生編號(hào),如果我們的步驟清單內(nèi)包含了超過100個(gè)項(xiàng)目,而我們需要在中間插入幾個(gè)新步驟時(shí),我們只需要簡(jiǎn)單的在正確的位置插入新的<li>項(xiàng)目就行了,瀏覽器會(huì)自動(dòng)重新編號(hào),簡(jiǎn)直就跟魔術(shù)一樣.
如果使用方法A的話,我們就需要在插入每個(gè)項(xiàng)目的時(shí)候手動(dòng)修正所有編號(hào),我隨便都能想到比這更有趣的工作可以做...
圖8-2,十一版瀏覽器顯示方法B的效果,在每個(gè)步驟之前都自動(dòng)加上編號(hào).
圖8-2 瀏覽器顯示方法B的效果
愉快的包裝者,第二部
方法B的另一個(gè)好處是,很長的清單項(xiàng)目在換行的時(shí)候,會(huì)縮進(jìn)到產(chǎn)生的編號(hào)后面,而方法A則會(huì)折到編號(hào)下面(圖8-3)
圖8-3 比較方法A和方法B換行效果
清單種類
雖然有序清單的預(yù)設(shè)編號(hào)樣式通常是阿拉伯?dāng)?shù)字(1,2,3,4,5等),但是我們能通過使用CSS的list-style-type屬性換掉編號(hào)樣式.而list-style-type能在以下幾種任選其一:
decimal: 1,2,3,4,...(通常是預(yù)設(shè)值)
upper-alpha: A,B,C,D...
lower-alpha: a,b,c,d...
upper-roman: I,II,III,IV...
lower-roman: i,ii,iii,iv...
none: 不加上編號(hào)
因此,舉例來說,如果我們想讓方法B產(chǎn)生大寫羅馬編號(hào)的話,我們就能夠以下的CSS達(dá)成目的:
ol li {
list-style-type: upper-roman;
}
圖8-4就是方法B配上這份CSS在瀏覽器內(nèi)的顯示效果,我們的步驟列表現(xiàn)在不再是預(yù)設(shè)的阿拉伯?dāng)?shù)字,而是改用羅馬數(shù)字編號(hào)了.當(dāng)然,標(biāo)記的部分仍然完全相同.改變主意了嗎?只要做點(diǎn)小小的修改,換上先前列出的其他樣式,就能馬上把清單的編號(hào)方式改成你喜歡的樣子.
圖8-4 換用羅馬數(shù)字的有序清單
HTML的type屬性:之前可能有些人會(huì)直接在<ol>標(biāo)簽中使用type屬性,把清單的編號(hào)方式換成羅馬數(shù)字,英文字母等等,然而,為了支持稍早所述的CSS規(guī)則,從HTML 4.01標(biāo)準(zhǔn)開始就不建議使用type屬性了,因此,你不應(yīng)該再使用type屬性,應(yīng)該改用CSS.
稍后,在技巧延伸中,我們會(huì)以CSS為這個(gè)有序清單加上樣式.但現(xiàn)在讓我們先看看另一個(gè)清單種類的例子.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——再談清單 [1] 下一頁 標(biāo)記語言——再談清單 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 標(biāo)記語言——再談清單 [2]
