|
技巧延伸
讓我們復(fù)習(xí)一下本章最初的有序步驟清單:
<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>
沒有加上任何CSS的話,瀏覽器的顯示效果與圖8-2差不多,就與本書其他的結(jié)構(gòu)化標(biāo)記語法示例一樣,在導(dǎo)入CSS的時(shí)候,有序清單是一組容易指定樣式的標(biāo)簽組.
我們知道,由于使用了正確的結(jié)構(gòu),因此不支持CSS或把CSS關(guān)閉的瀏覽器也能正確顯示出清單的內(nèi)容.
讓我們裝飾的花俏一些,先來自定每個(gè)項(xiàng)目之前的編號吧.
識別每個(gè)項(xiàng)目
為了讓我們能存取每個(gè)清單項(xiàng)目,把它的編號換成更華麗的樣式,我們需要為每個(gè)<li>標(biāo)簽加上id,我們也會為整個(gè)有序清單加上id,讓我們能為這個(gè)清單指定特定樣式,而不影響其他所有的<ol>.
<ol id="recipe">
<li id="one">Chop the onions.</li>
<li id="two">Saute the onions for 3 minutes.</li>
<li id="three">Add 3 cloves of garlic.</li>
<li id="four"> Cook for another 3 minutes.</li>
<li id="five">Eat.</li>
</ol>
現(xiàn)在我們能識別每個(gè)項(xiàng)目了,因此我們對清單內(nèi)每個(gè)元素的樣式都進(jìn)行完整控制.值得一提的是,在此為每個(gè)項(xiàng)目加上獨(dú)特的id之后,我們就無法依賴有序清單的"自動編號"功能了.如果稍侯在中間插入新步驟的話,我們就得自己變更往后步驟的id值,在此事先提醒一下.
自定數(shù)字
為清單建立自定數(shù)字的第一個(gè)步驟是用list-style-type屬性去掉#recipe元素預(yù)設(shè)的自動產(chǎn)生數(shù)字的效果:
#recipe {
list-style-type: none;
}
圖8-9 是用上面這條規(guī)則去掉數(shù)字之后的清單顯示效果.
圖8-9 用CSS關(guān)閉數(shù)字編號之后的有序清單
現(xiàn)在我們已經(jīng)防止自動產(chǎn)生數(shù)字了,接著就能以自己的數(shù)字圖片代替.用photoshop(或是你喜歡的繪圖工具)建立5個(gè)GIF圖片,一個(gè)數(shù)字一張圖.圖8-10是我用紅色Prensa字體建立的五個(gè)數(shù)字.
圖8-10 用在有序清單內(nèi)的五個(gè)GIF圖片
把數(shù)字加到CSS中
由于尺寸較大,因此我們需要為每個(gè)清單項(xiàng)目加上一點(diǎn)內(nèi)外補(bǔ)丁,以便為數(shù)字圖片留下足夠的空間讓它們顯示成背景,我們也會在每個(gè)步驟下面加上一條淺灰色的邊線.
我們能以繼承選擇器 #recipe li將這些規(guī)則套用到位于#recipe 中的<li>上,這讓我們不必為每個(gè)id重復(fù)定義這些規(guī)則.
#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}
把這些設(shè)定值套用到清單內(nèi)的每一個(gè)<li>之后,接著我們就能為每個(gè)id指定對應(yīng)的數(shù)字圖片.
#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}
#one {
background: url(ol_1.gif) no-repeat 6px 50%;
}
#two {
background: url(ol_2.gif) no-repeat 2px 50%;
}
#three {
background: url(ol_3.gif) no-repeat 3px 50%;
}
#four {
background: url(ol_4.gif) no-repeat 0px 50%;
}
#five {
background: url(ol_5.gif) no-repeat 6px 50%;
}
你應(yīng)該發(fā)現(xiàn)每張圖片指定的水平位置都有些差異,這是因?yàn)槊繌垐D片的寬度都不一樣,跟我選用的字體有關(guān)系,為了補(bǔ)正這個(gè)差異,我們把每張圖片視需要稍微向右移動一點(diǎn),讓每個(gè)數(shù)字旁邊的句號能夠排列整齊.
加上6px 50%會讓圖片擺放在離左邊6像素,上下50%的位置上,讓它對齊水平中線.
結(jié)果
圖8-11是以一般瀏覽器查看最終結(jié)果的樣子,每個(gè)圖片都顯示在項(xiàng)目的左側(cè),而每個(gè)步驟的底部都有一條灰色直線,進(jìn)一步把它們區(qū)分開來.
圖8-11 使用一般瀏覽器查看的最終效果
借著幾張圖片,幾條CSS規(guī)則,我們?yōu)榻Y(jié)構(gòu)化的有序清單加上了些自定的樣式:再度證明我們能把不重要的圖片放在標(biāo)簽之外,便于稍后更新.
結(jié)論
除了無需清單的變化之外,有序清單,定義清單也能提供相應(yīng)的語義結(jié)構(gòu),便利的樣式選擇,發(fā)揮你的想象力,試著用這幾種不同的清單類型 -- 同時(shí)以CSS為基礎(chǔ)結(jié)構(gòu)加上華麗的外衣吧.
在最后,你會得到能在各處正確顯示的堅(jiān)實(shí)基礎(chǔ),同時(shí)又能以CSS位功能強(qiáng)大的瀏覽器修改顯示效果.
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2824234-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/5901.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——再談清單 [4] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 標(biāo)記語言——再談清單 [5]
