淘寶段正淳的css筆記大全第1/4頁(yè)
試想過(guò)總結(jié)出這幾年來(lái)寫css與xhtml的經(jīng)驗(yàn) ，匯總成一片”曠世奇文”分享給大家。無(wú)奈寡人年世已高，真是有點(diǎn)力不從心了。于是轉(zhuǎn)念一想，可以用筆記的形式展現(xiàn)，這樣就不用擔(dān)心寫不出來(lái)了。
現(xiàn)在就來(lái)說(shuō)個(gè)淘寶首頁(yè)上的一個(gè)小技巧。
類目之間的橫豎線
從很久很久以前開(kāi)始，類目間的豎線無(wú)非都只有三種。
- 背景圖
在a標(biāo)簽設(shè)置一個(gè)padding 用寬1px高不等的背景圖來(lái)position到右側(cè)。
缺點(diǎn)：最后一個(gè)還是要用class來(lái)隱藏掉背景。 - 符號(hào)
在每個(gè)a標(biāo)簽之間用”|”符號(hào)來(lái)填充。
缺點(diǎn)：html文件變大，文件維護(hù)變得很麻煩，而且在html中毫無(wú)意義。 - 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)類目間豎線。
不過(guò)在淘寶首頁(yè)上線后不久就有同行的網(wǎng)站在首頁(yè)改版中也用了這樣的方法。
那個(gè)網(wǎng)站不看也罷。class實(shí)在是寫的有點(diǎn)多。加載html會(huì)變得多得多。
反正一個(gè)首頁(yè)需要加載1.17m的網(wǎng)頁(yè)我的大腦會(huì)自動(dòng)屏蔽。
相關(guān)文章
css靜態(tài)濾鏡 + A:Hover...2006-11-11
firefox下rowspan+border+border-collapse的bug
好久沒(méi)有發(fā)相關(guān)瀏覽器的坑了。今天同事cy發(fā)現(xiàn)，在firefox里rowspan不生效...2010-02-02
用DIV+CSS寫小三角...2007-01-01
是否想不用photoshop來(lái)創(chuàng)建一個(gè)帶漸變的標(biāo)題文字嗎? 這里用一個(gè)簡(jiǎn)單的css技巧來(lái)向你展示如何僅僅使用css和png圖片來(lái)制造這種效果.2008-05-05
驚嘆于老外的發(fā)現(xiàn) 《CSS Background image on html image element?》，自己從沒(méi)關(guān)注過(guò)，也沒(méi)想過(guò)如此的問(wèn)題。2009-04-04
屏蔽IE瀏覽器（也就是IE下不顯示）2008-12-12
提高網(wǎng)頁(yè)的效率 Use YSlow to know why your web Slow
內(nèi)容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的； SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭(頁(yè)面效率和搜索蜘蛛之間的關(guān)系，需要進(jìn)一步的確認(rèn)，此為和上篇保持統(tǒng)一)； UE設(shè)計(jì)的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。2008-09-09
HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而span和div標(biāo)簽似乎沒(méi)有任何內(nèi)容上的意義，聽(tīng)起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上，與CSS結(jié)合起來(lái)后，它們被用得十分廣泛。2008-05-05
js開(kāi)發(fā)中的頁(yè)面、屏幕、瀏覽器的位置原理（高度寬度）說(shuō)明講解（附圖）
前端js開(kāi)發(fā)中我們常遇到對(duì)頁(yè)面、屏幕、瀏覽器寬高和位置的獲取問(wèn)題，有時(shí)間查到了js的實(shí)現(xiàn)代碼，但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁(yè)面的高度、寬度信息。2023-02-02
Zen Coding 快速編寫HTML/CSS代碼的實(shí)現(xiàn)
在本文中我們將展示一種新的使用仿CSS選擇器的語(yǔ)法來(lái)快速開(kāi)發(fā)HTML和CSS的方法。它由Sergey Chikuyonok開(kāi)發(fā)。2011-01-01