概要
本章到目前為止,我們看了另外的兩種清單:有序清單,定義清單.我們發(fā)現(xiàn)借著使用這些清單結(jié)構(gòu),代替無(wú)序清單加上額外標(biāo)簽的做法,能夠讓我們更容易控制樣式,同時(shí)也讓清單變得更容易維護(hù).
接著以我們本章最初的步驟清單當(dāng)作例子,用CSS為他調(diào)整一下樣式. 技巧延伸
讓我們復(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>

沒(méi)有加上任何CSS的話,瀏覽器的顯示效果與圖8-2差不多,就與本書其他的結(jié)構(gòu)化標(biāo)記語(yǔ)法示例一樣,在導(dǎo)入CSS的時(shí)候,有序清單是一組容易指定樣式的標(biāo)簽組.
我們知道,由于使用了正確的結(jié)構(gòu),因此不支持CSS或把CSS關(guān)閉的瀏覽器也能正確顯示出清單的內(nèi)容.
讓我們裝飾的花俏一些,先來(lái)自定每個(gè)項(xiàng)目之前的編號(hào)吧. 識(shí)別每個(gè)項(xiàng)目
為了讓我們能存取每個(gè)清單項(xiàng)目,把它的編號(hào)換成更華麗的樣式,我們需要為每個(gè)<li>標(biāo)簽加上id,我們也會(huì)為整個(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)在我們能識(shí)別每個(gè)項(xiàng)目了,因此我們對(duì)清單內(nèi)每個(gè)元素的樣式都進(jìn)行完整控制.值得一提的是,在此為每個(gè)項(xiàng)目加上獨(dú)特的id之后,我們就無(wú)法依賴有序清單的"自動(dòng)編號(hào)"功能了.如果稍侯在中間插入新步驟的話,我們就得自己變更往后步驟的id值,在此事先提醒一下. 自定數(shù)字
為清單建立自定數(shù)字的第一個(gè)步驟是用list-style-type屬性去掉#recipe元素預(yù)設(shè)的自動(dòng)產(chǎn)生數(shù)字的效果:

#recipe {
list-style-type: none;
}

圖8-9 是用上面這條規(guī)則去掉數(shù)字之后的清單顯示效果.
圖8-9 用CSS關(guān)閉數(shù)字編號(hào)之后的有序清單
現(xiàn)在我們已經(jīng)防止自動(dò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ù)字圖片留下足夠的空間讓它們顯示成背景,我們也會(huì)在每個(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指定對(duì)應(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è)差異,我們把每張圖片視需要稍微向右移動(dòng)一點(diǎn),讓每個(gè)數(shù)字旁邊的句號(hào)能夠排列整齊.
加上6px 50%會(huì)讓圖片擺放在離左邊6像素,上下50%的位置上,讓它對(duì)齊水平中線. 結(jié)果
圖8-11是以一般瀏覽器查看最終結(jié)果的樣子,每個(gè)圖片都顯示在項(xiàng)目的左側(cè),而每個(gè)步驟的底部都有一條灰色直線,進(jìn)一步把它們區(qū)分開(kāi)來(lái).

圖8-11 使用一般瀏覽器查看的最終效果
借著幾張圖片,幾條CSS規(guī)則,我們?yōu)榻Y(jié)構(gòu)化的有序清單加上了些自定的樣式:再度證明我們能把不重要的圖片放在標(biāo)簽之外,便于稍后更新. 結(jié)論
除了無(wú)需清單的變化之外,有序清單,定義清單也能提供相應(yīng)的語(yǔ)義結(jié)構(gòu),便利的樣式選擇,發(fā)揮你的想象力,試著用這幾種不同的清單類型 -- 同時(shí)以CSS為基礎(chǔ)結(jié)構(gòu)加上華麗的外衣吧.
在最后,你會(huì)得到能在各處正確顯示的堅(jiān)實(shí)基礎(chǔ),同時(shí)又能以CSS位功能強(qiáng)大的瀏覽器修改顯示效果.
從章節(jié)上看,本書的一半已經(jīng)翻譯完成了,這才知道把英文文獻(xiàn)搞成中文有多不容易了...首先得理解原作者的本意才能用自己的語(yǔ)言組織... 關(guān)于這一張,我還是比較喜歡用合成背景圖然后用background-position來(lái)為每個(gè)清單列表指定相應(yīng)的背景圖的做法,至少會(huì)從視覺(jué)上減少載入圖片的次數(shù)...哈哈

最新評(píng)論