標(biāo)準(zhǔn)化設(shè)計(jì)解決方案 - 標(biāo)記語(yǔ)言和樣式手冊(cè)
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標(biāo)記語(yǔ)法談起
Chapter 1 清單
在網(wǎng)絡(luò)上幾乎每個(gè)頁(yè)面都能找到清單. 超鏈接清單;購(gòu)物車物品清單;你中意的電影清單...甚至是整個(gè)網(wǎng)站的導(dǎo)航清單.可能在某些人看來,清單的建立是隨心所欲的,但是我們要去探索發(fā)現(xiàn)的正是如何建立清單以及集中幾種常用方法的優(yōu)缺點(diǎn).稍后,我們會(huì)列出幾個(gè)如何美化普通清單一集他們的優(yōu)缺點(diǎn)的示例來.
咱們?nèi)ベ?gòu)物吧
最初,我打算用一個(gè)細(xì)目清單(洗衣清單)來作為本章的示例,但是很快的,我就意識(shí)到,我根本不知道這種清單中應(yīng)該包括那些細(xì)目,所以...看在示例的份上,就用食物來舉例吧!
讓我們?cè)O(shè)想,你需要把一個(gè)食品清單放到你自己的網(wǎng)站上去,你可能會(huì)為為什么要把食物清單放到網(wǎng)站上去而感到不解,厄,這個(gè)可能就離題了,我們只是需要一個(gè)可以開始為清單思考的理由罷了...
在頁(yè)面上,假設(shè)我們想讓清單看起來像......好吧,看起來就像一個(gè)清單 — 也就是一長(zhǎng)串垂直的列表,里面的每項(xiàng)內(nèi)容獨(dú)占一行:
Apples
Spaghetti
Green Beans
Milk
看起來非常簡(jiǎn)單,不是嗎?和頁(yè)面設(shè)計(jì)開發(fā)的許多方面類似,我們能夠通過很多不同的方法達(dá)成相同(或者類似)的效果.與這本書后面所有的示例相同的,我將以eXtensilble HyperText Markup Language(XHTML)的觀點(diǎn)來展現(xiàn)所有示例 — 并且確認(rèn)選用的方法都使用正確的標(biāo)記語(yǔ)法,遵照World Wild Web Consortium (W3C)所制定的各種標(biāo)準(zhǔn).
我們可以輕松的在每個(gè)項(xiàng)目后面加上個(gè)<br />標(biāo)簽就搞定了,或者也能使用各種清單項(xiàng)目標(biāo)簽來完成這個(gè)工作,現(xiàn)在我們就來看3種完全不同的方法,以及每種方法的特點(diǎn).
#p#
提問時(shí)間
下面哪種方法最適合建立食品清單?
方法 A: 用 <br /> 換行
Apples<br />
Spaghetti<br />
Green Beans<br />
Milk<br />
方法A的確是一種被廣為傳用的方法,可能有數(shù)百萬個(gè)頁(yè)面使用過,事實(shí)上,我相信我們中的每個(gè)人都會(huì)偶爾因?yàn)槭褂昧诉@種方法而感到內(nèi)疚,對(duì)吧?我們希望在清單中的每一項(xiàng)都獨(dú)占一行,而加入了換行標(biāo)簽(在這里使用的是符合xhtml標(biāo)準(zhǔn)的自關(guān)閉標(biāo)簽<br />)就會(huì)在每個(gè)項(xiàng)目后面生成斷行,這就是他所有的效果了,看起來,挺管用的.
但是,如果我們想要給這個(gè)食品清單加上與其他頁(yè)面元素不同的樣式的時(shí)候該怎么辦呢?比方說:如果想讓清單的所有鏈接的顏色變成紅色而不同于默認(rèn)的藍(lán)色,或者想要改變字體的大小時(shí)該怎么辦呢?真的我們什么都做不了,我們被為整份html文檔設(shè)定的字體風(fēng)格(如果有設(shè)定的話)限制住了.同時(shí),如果在清單外面沒有任何標(biāo)簽圍繞,我們就沒辦法為清單制定一個(gè)獨(dú)特的css規(guī)則.
折行
如果我們?cè)谇鍐沃屑尤胍粋€(gè)類似"Five Foot Loaf of Anthony's Italian Bread".根據(jù)這個(gè)清單在頁(yè)面里擺放的位置,在水平空間不足或者瀏覽者的瀏覽器視窗比較窄的情況下,過長(zhǎng)的項(xiàng)目就會(huì)冒著折到下一行的風(fēng)險(xiǎn).
同時(shí)我們也要考慮到視力不佳的用戶可能會(huì)把預(yù)設(shè)的字體大小改大以便增加可讀性,我們認(rèn)為能夠像 圖1 - 1 一樣把項(xiàng)目輕松的布置在窄欄里,但是很有可能會(huì)像 圖 1 - 2 這樣在意料之外的地方發(fā)生斷行,讀者調(diào)大字體時(shí),設(shè)計(jì)的樣式就完全變樣了.

圖 1 - 1 預(yù)設(shè)文字大小的范圍

圖 1 - 2 調(diào)大文字大小后的相同內(nèi)容
唔......現(xiàn)在,我想我應(yīng)該要買面包是沒錯(cuò),但是在 圖 1 - 2 里,面包上面的兩行字實(shí)在感到疑惑.
在使用小屏幕裝置像是移動(dòng)電話或者PDA閱讀長(zhǎng)行時(shí),類似的換行問題就會(huì)展露它丑惡的嘴臉,骨灰級(jí)的科技愛好者可能會(huì)隨手帶著記錄購(gòu)物清單的Palm Pilot(而不是傳統(tǒng)意義上的紙和筆)當(dāng)他在超級(jí)市場(chǎng)里面閑逛的時(shí)候,最后卻在貨架中尋找一種叫"Anthony's Italian"的東西.
在這里我要在本質(zhì)上闡明一個(gè)觀點(diǎn) - 使用方法A ,并沒有把閱讀網(wǎng)頁(yè)時(shí)的這些設(shè)計(jì)師們所無法控制的變數(shù)考慮在內(nèi).
#p#
方法 B: 會(huì)咬人的小圓點(diǎn)
<li>Apples<br />
<li>Spaghetti<br />
<li>Green Beans<br />
<li>Milk<br />
大多數(shù)成熟的瀏覽器在解析<li>標(biāo)簽時(shí)都會(huì)在清單項(xiàng)目的左側(cè)加上圓點(diǎn)符號(hào),你能通過方法B來達(dá)到這個(gè)效果,在需要圓點(diǎn)符號(hào)時(shí)加入<li>標(biāo)簽.但是如果<li>標(biāo)簽沒有被包含在適當(dāng)?shù)母笜?biāo)簽中時(shí),那有些瀏覽器不會(huì)顯示出圓點(diǎn)符號(hào),適當(dāng)?shù)母笜?biāo)簽包括強(qiáng)大的<ul>以及<li>的另一個(gè)父標(biāo)簽<ol>(有序清單),這個(gè)會(huì)在稍后有更多的討論.
圓點(diǎn)符號(hào)的出現(xiàn)在某種程度上的確能夠幫助解決換行問題,每個(gè)食品項(xiàng)目在左邊會(huì)有小圓點(diǎn)符號(hào),如果某個(gè)項(xiàng)目過長(zhǎng)折行的話,旁邊沒有小圓點(diǎn)符號(hào)應(yīng)該就可以很明顯的看出這并不是全新的項(xiàng)目,但是方法B仍然有顯示結(jié)果意外的問題:它并不符合標(biāo)準(zhǔn).
麻煩檢查一下
根據(jù)W3C的XHTML 1.0規(guī)范,所有的標(biāo)簽最后都必須要閉合起來 — 如果我們還是繼續(xù)使用上面示例中的寫法,讓所有的<li>保持開放狀態(tài)的話,那就太丟臉了!
在行末使用<br />標(biāo)簽來模擬正確的無序清單自動(dòng)換行的顯示效果,但其實(shí)我們有更好的方法.
一向以來,養(yǎng)成編寫正確的標(biāo)簽語(yǔ)法的習(xí)慣非常重要,正確的編寫標(biāo)簽語(yǔ)法,我們可以不必在未來?yè)?dān)心由于沒有閉合標(biāo)簽或者不正確的嵌套元素所帶來的問題.如果有人閱讀這些源代碼的話,也可以使他們更加深入的理解源代碼想要達(dá)成的效果.
記得善用W3C的在線檢測(cè)工具(http://validator.w3.org/)來檢查你提交的URI或者上傳的文檔,最終你會(huì)覺得這樣做非常值得.
#p#
方法 C: 接近了
<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>
方法C更加的接近完美的解決方案了,但是還是悲慘的失敗了,原因還是非常明顯:這仍然不符合標(biāo)準(zhǔn)的標(biāo)記語(yǔ)法.
我們已經(jīng)把<li>標(biāo)簽關(guān)閉了,因?yàn)?lt;li>是塊級(jí)元素(block-level),因此在使用上可以去掉<br />標(biāo)簽,這樣每個(gè)項(xiàng)目都獨(dú)占一行,但是,我們卻漏了它的外層結(jié)構(gòu),缺少了一個(gè)表示"這群項(xiàng)目是一個(gè)清單!"的元素.
從語(yǔ)義化的角度看這個(gè)問題也非常重要 — 清單是一組項(xiàng)目歸屬在一起,因此我們應(yīng)該為它們加上這樣的標(biāo)簽,此外,使用正確的清單標(biāo)簽?zāi)芮宄嬖V瀏覽器,軟件或者顯示設(shè)備"這組項(xiàng)目是個(gè)清單!",語(yǔ)義化標(biāo)簽的意義就在于將內(nèi)容根據(jù)他們所屬的類別進(jìn)行結(jié)構(gòu)性的搭建.
塊級(jí)(block-level)與行內(nèi)(inline): HTML元素可以分為塊級(jí)與行內(nèi)兩大類型,塊級(jí)元素會(huì)從新行開始,最后接著一個(gè)斷行,而行內(nèi)元素則會(huì)與其他的行內(nèi)元素顯示在同一行內(nèi),塊級(jí)元素可以包括其他塊級(jí)元素和行內(nèi)元素,而行內(nèi)元素里面不能包含塊級(jí)元素.
塊級(jí)元素包括:<div>,<h1>-<h6>,<form>等等,行內(nèi)元素包括:<span>,<strong>,<em>,<q>等等.
如果以純XML的角度來看我們的食品清單,或許我們會(huì)使用這樣的方式進(jìn)行標(biāo)注:
<grocerylist>
<item>Apples</item>
<item>Spaghetti</item>
<item>Green Beans</item>
<item>Milk</item>
</grocerylist>
整個(gè)清單有一個(gè)容器元素<grocerylist>,所有的食品項(xiàng)目都包含在里面,以這種方式歸類項(xiàng)目,可以基于XML的應(yīng)用輕松的從清單里面抽取出所有的項(xiàng)目.
舉例來說,一個(gè)開發(fā)者需要編寫一份XSLT樣式表,將這個(gè)清單轉(zhuǎn)成xhtml,純文字,甚至是pdf文件,因?yàn)榱斜眄?xiàng)目的結(jié)構(gòu)表現(xiàn)的非常清晰,所以程序可以輕松的獲取信息并作出一些有用的處理.
雖然在這本書里我并不直接處理XML,但是這些原則也適用于XHTML世界,如果文檔使用非常語(yǔ)義化的標(biāo)簽結(jié)構(gòu),將可以提升文檔今后的靈活度,不管是為結(jié)構(gòu)清晰的文檔加上css樣式表還是修改容易理解的文檔 — 只要提供正確的結(jié)構(gòu),就能節(jié)省許多今后在維護(hù)時(shí)可能浪費(fèi)掉的時(shí)間.
接著,我們仔細(xì)的看看方法D,看看這些怎么樣結(jié)合在一起 — 一個(gè)能被大多數(shù)瀏覽器和屏幕閱讀器識(shí)別并顯示的文檔,同時(shí)又允許我們使用各種不同的方法為文檔加上樣式.
#p#
方法 D: 愉快的包裝者
<ul>
<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>
</ul>
是什么讓方法D變得如此特別?首先,它的語(yǔ)法完全正確,正確的無序清單具備了<ul>容器元素,同時(shí)每個(gè)項(xiàng)目都已<li>元素閉合起來.到這里你會(huì)想問,我們花費(fèi)了那么多力氣只來示范為了正確而正確?我們來看看這樣做能帶來的好處:
由于我們正確的標(biāo)記了我們的食品清單,每個(gè)項(xiàng)目都會(huì)獨(dú)占一行(因?yàn)閴K級(jí)元素<li>的關(guān)系),而且大多數(shù)瀏覽器會(huì)給每個(gè)項(xiàng)目的左邊增加一個(gè)小圓點(diǎn)符號(hào),并且進(jìn)行正確的行內(nèi)縮進(jìn)換行.(見圖 1 - 3)

圖1 - 3
PDA,移動(dòng)電話,或者其他的小屏幕設(shè)備的用戶也可以看到清楚的,關(guān)系明確的組織方式,由于我們告訴了這些設(shè)備這些資料的類型(在這個(gè)示例里是清單),因此這些設(shè)備能夠根據(jù)自己的能力決定怎樣顯示才能達(dá)到最好的效果.
如果因?yàn)榉糯笞痔?hào)或者縮小瀏覽器視窗寬度等原因造成換行,那么被換行的文字會(huì)行內(nèi)縮進(jìn)到與第一行文字對(duì)齊的位置,所以不管瀏覽器環(huán)境如何,都可以輕松的識(shí)別每個(gè)清單項(xiàng)目.
#p#
概要
我們已經(jīng)針對(duì)每種可能的方法進(jìn)行討論了,現(xiàn)在讓我們快速的回顧一下剛才討論過的東西: 方法A:
無法為清單加上獨(dú)特的樣式
在狹窄的列里或者小屏幕設(shè)備上,較長(zhǎng)的內(nèi)容可能會(huì)因?yàn)閾Q行而造成誤解
缺乏語(yǔ)義性 方法B:
增加小圓點(diǎn)符號(hào)來幫助識(shí)別每個(gè)項(xiàng)目,但是一些瀏覽器會(huì)在缺失父級(jí)標(biāo)簽<ul>時(shí)可能不顯示小圓點(diǎn)符號(hào)
沒有放在<ul>中,缺少閉合標(biāo)簽</li>意味著難于加上樣式
不標(biāo)準(zhǔn) 方法C:
加上了閉合標(biāo)簽</li>后就不需要<br />標(biāo)簽了
省略了<ul>元素使得我們難于為這個(gè)清單添加特定的樣式
不標(biāo)準(zhǔn) 方法D:
符合標(biāo)準(zhǔn)!
使文檔語(yǔ)義化,結(jié)構(gòu)性
大多數(shù)瀏覽器都會(huì)在每個(gè)項(xiàng)目左邊顯示小圓點(diǎn)符號(hào)
在大多數(shù)瀏覽器上都會(huì)在換行后行內(nèi)縮進(jìn)
很容易就可以定義特定的css樣式
正如你所見,你可以從一個(gè)看起來很簡(jiǎn)單的問題上獲得不少知識(shí).就算是你已經(jīng)在你所有的頁(yè)面上都是用了方法D,還是可以你為什么這樣做比較好,我們會(huì)在這本書里一直探索"為什么"的問題,讓你在各種情況下選用最恰當(dāng)?shù)姆椒?
#p#
技巧延伸
讓我們利用我們構(gòu)造出來的食品清單來試看看幾種用定義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)化的無序清單,然后使用css關(guān)閉掉小圓點(diǎn)符號(hào)和行內(nèi)縮進(jìn),關(guān)鍵在于我們保留了清單的結(jié)構(gòu),然后以css具體的呈現(xiàn)出來.
首先,加上一段去掉圓點(diǎn)符號(hào)的css規(guī)則:
ul{
list-style:none;
}
顯示的結(jié)果見圖1 - 4

圖 1 - 4 去掉小圓點(diǎn)符號(hào)
接著我們來去掉行內(nèi)縮進(jìn),根據(jù)預(yù)設(shè)值,所有無序清單左邊都會(huì)留有一些內(nèi)補(bǔ)丁(padding),但是不用擔(dān)心,我們可以隨心所欲的裁掉:
ul{
list-style:none;
padding-left:0;
}
顯示結(jié)果可見圖1 - 5

圖 1 - 5
雖然圖 1 - 5 看起來和使用了幾個(gè)<br />標(biāo)簽的效果幾乎一樣,但是它還是符合標(biāo)準(zhǔn)的,結(jié)構(gòu)化的無序列表 — 不管什么瀏覽器,設(shè)備都能正常顯示,如果必要的話只需要更新幾條css規(guī)則就能換上不同的樣式了.
#p#
使用自定義圓點(diǎn)符號(hào)來完成自己的想象
或許你想要在清單里保留小圓點(diǎn)符號(hào),但是不想用瀏覽器無趣的默認(rèn)設(shè)置,更像用自己的小圓點(diǎn)圖案.有兩種方法可以達(dá)成你想要的 — 而我更推崇第二種方法,因?yàn)樗梢栽诟鞣N瀏覽器之間更好的兼容.
第一種方法是用 list-style-image 屬性來指定用來替代默認(rèn)小圓點(diǎn)的圖片名稱.
ul{
list-style-image:url(i_hot.gif)
}
這是最簡(jiǎn)單的方法,但是它會(huì)在不同瀏覽器之間的圖片垂直對(duì)齊位置上有所不同,有些瀏覽器會(huì)把圖片和項(xiàng)目文字中線對(duì)齊,也有的會(huì)把圖片放得稍微高一點(diǎn),它們之間有一點(diǎn)不一致.
為了避免 list-style-image 造成的幾個(gè)流行瀏覽器之間的對(duì)齊問題,我比較喜歡用一種替代方法:把圖片作為每個(gè)<li>元素的背景.
首先,我們要去掉默認(rèn)的圓點(diǎn),然后再加上我們自己的背景圖片:
ul{
list-style:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}
no-repeat 會(huì)告訴瀏覽器不把背景圖片進(jìn)行平鋪操作(默認(rèn)會(huì)平鋪),而0 50%會(huì)告訴瀏覽器把背景圖片放置在距離左邊 0 像素,距離上面 50% 的地方,讓背景圖片 i_hot.gif 根據(jù)中線對(duì)齊.我們也可以用精確的像素來指定位置,比如說 0 6px 會(huì)讓圖片放置在距離左邊0像素,距離上面 6 像素的位置上.
我們還要在清單項(xiàng)目的左邊加上17像素的內(nèi)補(bǔ)丁(padding),以便我們把寬20像素高11像素的圖片能夠完整顯示出來,同時(shí)又留有一點(diǎn)空白,而不會(huì)和文字有重疊.這些數(shù)據(jù)應(yīng)該根據(jù)你所使用的圖片尺寸進(jìn)行調(diào)整( 圖 1 - 6 )

圖 1 - 6 自定義圓點(diǎn)圖片的清單
#p#
導(dǎo)航清單
在我的個(gè)人網(wǎng)站(www.simplebits.com)里我分享了幾種將無序清單轉(zhuǎn)化為水平導(dǎo)航條的方法,用普通的,結(jié)構(gòu)化的XHTML就像我們的食品清單示例那樣創(chuàng)造一個(gè)類似分頁(yè)標(biāo)簽(Tab)的效果.
我們把那個(gè)食品清單轉(zhuǎn)換成一個(gè)網(wǎng)上超市的導(dǎo)航條(這個(gè)超市只賣幾種東西就是了...).
我們想要這個(gè)導(dǎo)航條以水平的方式呈現(xiàn),并且能夠在鼠標(biāo)劃過,選中時(shí)有某種強(qiáng)調(diào)顯示,以便我們模擬分頁(yè)標(biāo)簽的效果.
首先,我們?yōu)榍鍐渭由弦粋€(gè)id,這樣我們就可以為它單獨(dú)定義css樣式了,同時(shí)我們也將把每個(gè)食品項(xiàng)目轉(zhuǎn)成鏈接.
<ul id="minitabs">
<li><a href="/apples/">Apples</a></li>
<li><a href="/spaghetti/">Spaghetti</a></li>
<li><a href="/greenbeans/">Green Beans</a></li>
<li><a href="/milk/">Milk</a></li>
</ul>
現(xiàn)在,開始加上一些輔助的css:
#minitabs{
margin:0;
padding:0 0 20px 10px;
border-bottom:1px solid #696;
}
#minitabs li{
margin:0;
padding:0;
display:inline;
list-style:none;
}
在這里我們已經(jīng)完成了去掉默認(rèn)圓點(diǎn)符號(hào)和行內(nèi)縮進(jìn)的工作,我們也把 display設(shè)置成inline,往垂直清單轉(zhuǎn)化成水平清單邁出了第一步,同時(shí)我們也加上了底部邊框以便區(qū)分出整個(gè)鏈接組.
把清單轉(zhuǎn)化成水平導(dǎo)航條的第二步,是將我們的鏈接全部浮動(dòng)到左邊顯示,我們同樣為所有的超鏈接加上簡(jiǎn)單的樣式:定義外邊距和內(nèi)補(bǔ)丁的大小:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
在這里我們將清單中所有的元素都定義float:left,是為了讓他們能水平顯示排列于一行之內(nèi),同時(shí)我們也加上了了一些色彩,把鏈接改成粗體,拿掉了鏈接底部的下劃線.
然后,為鼠標(biāo)滑過或選中的鏈接創(chuàng)建一個(gè)模擬分頁(yè)標(biāo)簽的邊線:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a:hover {
color: #696;
}
為了強(qiáng)調(diào)鏈接,我們?cè)谑髽?biāo)劃過或選中時(shí)增加一個(gè)4像素高的底邊,我們也可以使選中的<a>標(biāo)簽保持強(qiáng)調(diào)效果,只要加上class="active":
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
這個(gè) active類別與 a:hover的共用相同的css樣式.(圖 1 - 7)

圖1 - 7
我在自己的網(wǎng)站(www.simlpebits.com)以及2003年7月重構(gòu)Inc.com(www.inc.com)里面都用到了這個(gè)技巧.如果你需要更多的示例代碼,可以自由訪問這兩個(gè)網(wǎng)站并查看他們的源代碼.
只需要加上一些內(nèi)補(bǔ)丁和邊框,就可以達(dá)到各種類似分頁(yè)標(biāo)簽的效果了,到目前為止,我們甚至連一張圖,一句javascript都沒有使用,而僅僅只用到了基本的xhtml結(jié)構(gòu)就構(gòu)成了我們的食品清單,這實(shí)在是太棒了!
迷你分頁(yè)標(biāo)簽的外觀
如果你想要和平常的,方方正正的css邊框不太一樣的效果的話,只需要作出一點(diǎn)點(diǎn)小修改,我們就可以使用圖片來創(chuàng)建有趣的導(dǎo)航條了.
我們使用和之前完全一樣的無序清單,以及十分類似的css:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
這段css大概看起來和上一個(gè)示例中的幾乎一樣,最主要的區(qū)別在我們用 background-image 定義了在鼠標(biāo)劃過或選中的時(shí)候顯示在鏈接底部中間的圖片來代替了原本的4個(gè)像素高的底部邊框.(圖 1 - 8)

圖 1 - 8: 使用背景圖的迷你分頁(yè)標(biāo)簽導(dǎo)航
這里的技巧在于選擇一個(gè)足夠窄的圖片,必須能夠塞進(jìn)最短的導(dǎo)航條項(xiàng)目下,這樣一來我們只需要一張圖片來強(qiáng)調(diào)導(dǎo)航鏈接而不必為各種不同寬度準(zhǔn)備不同的圖片,當(dāng)然,在你自己的項(xiàng)目中,你可以選擇各種圖片使用(圖 1 - 9):

圖 1 - 9: 使用其他圖片的例子
這些迷你分頁(yè)標(biāo)簽的源碼和示例都可以在www.simplebits.com/tips/ 找到,更多的為清單添加樣式的方法可以參考 Mark Newhouse在A List Apart雜志上發(fā)表的"Taming Lists"的文章(www.alistpart.com/stories/taminglists/)

最新評(píng)論