|
回顧完各種處理方式后，一起來了解一下實現(xiàn)上的細(xì)節(jié)，分析一下文章第一張圖所示，共有38個圖標(biāo)，且都是圖形化，原始想法是，把38個圖合并成一個文件。但細(xì)心看，這38個圖片，有好多的相同的圖形，經(jīng)過整理后，得到下面這張圖：
除四個圖標(biāo)載體外，數(shù)字都是相同的，因為這里使用的是第四種處理方式，那么在圖標(biāo)的合并上，不用給各小圖片塊預(yù)留過多的透明區(qū)域。
雪碧圖處理好以后，就可以著手寫代碼來實現(xiàn)效果了。
<strong class="gb_vip_1"><span><span>lv1</span></span></strong>
<strong class="gb_vip_2"><span><span>lv2</span></span></strong>
為了讓標(biāo)簽具有img的特有屬性，給strong定義display:-moz-inline-stack;display:inline-block;
因各瀏覽器兼容性的原因，需要定義了兩個屬性，這里不禁一定要問了，為什么不選用-moz-inline-box呢？這里選用-moz-inline-stack而非-moz-inline-box的原因是：
- 使用-moz-inline-stack可以解決Firefox2不支持inline-block的問題，但是所有的Firefox版本對于屬性為-moz-inline-stack的Element，它的First child element會繼承該Element的寬度和高度，但是再下一級的Element不會再繼承該屬性。
- 這里說說一下與本圖標(biāo)應(yīng)用無關(guān)的話題，在實際應(yīng)用中-moz-inline-box會存在元素間的對齊等問題，在處理自適應(yīng)寬的<button>就能遇到。雖然Firefox有一個私有屬性-moz-box-align來幫助解決Element水平對齊問題，但未能預(yù)見的問題依舊不少，而相對來說-moz-inline-stack的表現(xiàn)更像inline-block，這點可以在Firefox3中驗證出來。僅管如此，-moz-inline-stack使用時也會有一個bug，如果一個moz-inline-stack的Element外層Element是inline屬性就會使Firefox中其包含的鏈接不可點(和IE6的filter+position:absolute出現(xiàn)的BUG一樣），這個可以借助position:relative;來解決。
設(shè)置完display屬性后，我們就給圖標(biāo)定義寬高。實際的圖標(biāo)處理中，完成這兩步基本就OK了。但是這個圖標(biāo)應(yīng)用較為特殊，因為它是兩個背景合成一個圖標(biāo)的（載體+等級數(shù)），如下圖：
下面是兩個載體的拼合示意：
所以在結(jié)構(gòu)上加多了兩個span，一個是給等級數(shù)字的背景載體，另一個是隱藏圖標(biāo)替換文字。
代碼寫完后，發(fā)現(xiàn)代碼量相當(dāng)?shù)捏@人，因為只在最外層定義不同的className，那么，就意味著，我們要對眾多個類及其里面的標(biāo)題定義：
.gb_vip_1 span,
.gb_vip_2 span,
.gb_vip_3 span,
.gb_vip_4 span,
.gb_vip_5 span,
.gb_vip_6 span,
.gb_vip_7 span
這樣代碼就相當(dāng)臃腫，于是，改變className的定義方式，給各個等級圖標(biāo)最外層容器定義相同的命名，給里面數(shù)字的載體定義區(qū)別顯示的命名(帶數(shù)字的命名是方便邏輯實現(xiàn))：
<strong class="gb_vip_icon"><span class="lv1"><span class="gb_vip_none">lv1</span></span></strong>
<strong class="gb_vip_icon"><span class="lv2"><span class="gb_vip_none">lv2</span></span></strong>
以上所述的供討論和參考，期盼大伙一些其它的想法和分享。
原文：http://webteam.tencent.com/?p=1330
本文鏈接：http://www.95time.cn/tech/web/2009/7214.asp 
出處：騰訊Webteam
責(zé)任編輯：bluehearts
上一頁 由黃鉆等級圖標(biāo)處理引發(fā)的思考 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 由黃鉆等級圖標(biāo)處理引發(fā)的思考 [3]
