試想過(guò)總結(jié)出這幾年來(lái)寫(xiě)css與xhtml的經(jīng)驗(yàn) ，匯總成一片”曠世奇文”分享給大家。無(wú)奈寡人年世已高，真是有點(diǎn)力不從心了。于是轉(zhuǎn)念一想，可以用筆記的形式展現(xiàn)，這樣就不用擔(dān)心寫(xiě)不出來(lái)了。

現(xiàn)在就來(lái)說(shuō)個(gè)淘寶首頁(yè)上的一個(gè)小技巧。

類(lèi)目之間的橫豎線

從很久很久以前開(kāi)始，類(lèi)目間的豎線無(wú)非都只有三種。

1. 背景圖
   在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來(lái)position到右側(cè)。
   缺點(diǎn)：最后一個(gè)還是要用class來(lái)隱藏掉背景。
2. 符號(hào)
   在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)填充。
   缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無(wú)意義。
3. a標(biāo)簽右側(cè)的boder。
   同背景圖一樣，只不過(guò)使用border-right來(lái)代替。缺點(diǎn)也同上。

看到這里，可能已經(jīng)有人打開(kāi)淘寶首頁(yè)用firebug查看源碼來(lái)看是怎么做了。

其實(shí)現(xiàn)有是利用ul的overflow:hidden 再將li的margin-left:-1px的做法做出來(lái)的。這樣的做法就可以同時(shí)避免以上的缺點(diǎn)了。
為什么之前都沒(méi)有那么做的，寡人也不知道了。難道寡人是第一個(gè)發(fā)現(xiàn)這樣的做法？
不管是誰(shuí)先此之前利用了這樣的方法實(shí)現(xiàn)類(lèi)目間豎線。
不過(guò)在淘寶首頁(yè)上線后不久就有同行的網(wǎng)站在首頁(yè)改版中也用了這樣的方法。
那個(gè)網(wǎng)站不看也罷。class實(shí)在是寫(xiě)的有點(diǎn)多。加載html會(huì)變得多得多。
反正一個(gè)首頁(yè)需要加載1.17m的網(wǎng)頁(yè)我的大腦會(huì)自動(dòng)屏蔽。

最新評(píng)論