淘寶段正淳的css筆記大全第1/4頁
更新時間：2007年10月25日 11:12:38 作者：
試想過總結(jié)出這幾年來寫css與xhtml的經(jīng)驗 ，匯總成一片”曠世奇文”分享給大家。無奈寡人年世已高，真是有點力不從心了。于是轉(zhuǎn)念一想，可以用筆記的形式展現(xiàn)，這樣就不用擔(dān)心寫不出來了。
現(xiàn)在就來說個淘寶首頁上的一個小技巧。
類目之間的橫豎線
從很久很久以前開始，類目間的豎線無非都只有三種。
- 背景圖
在a標簽設(shè)置一個padding 用寬1px高不等的背景圖來position到右側(cè)。
缺點：最后一個還是要用class來隱藏掉背景。 - 符號
在每個a標簽之間用”|”符號來填充。
缺點：html文件變大，文件維護變得很麻煩，而且在html中毫無意義。 - a標簽右側(cè)的boder。
同背景圖一樣，只不過使用border-right來代替。缺點也同上。
看到這里，可能已經(jīng)有人打開淘寶首頁用firebug查看源碼來看是怎么做了。
其實現(xiàn)有是利用ul的overflow:hidden 再將li的margin-left:-1px的做法做出來的。這樣的做法就可以同時避免以上的缺點了。
為什么之前都沒有那么做的，寡人也不知道了。難道寡人是第一個發(fā)現(xiàn)這樣的做法？
不管是誰先此之前利用了這樣的方法實現(xiàn)類目間豎線。
不過在淘寶首頁上線后不久就有同行的網(wǎng)站在首頁改版中也用了這樣的方法。
那個網(wǎng)站不看也罷。class實在是寫的有點多。加載html會變得多得多。
反正一個首頁需要加載1.17m的網(wǎng)頁我的大腦會自動屏蔽。
相關(guān)文章
驚嘆于老外的發(fā)現(xiàn) 《CSS Background image on html image element?》，自己從沒關(guān)注過，也沒想過如此的問題。2009-04-04
布局用CSS+DIV的優(yōu)點總結(jié)...2007-08-08
一個老外弄的Clearing floats(清除浮動的方法)
一個老外弄的Clearing floats(清除浮動的方法)...2007-09-09
在西方國家的字母體系，分成兩大字族：serif 及 sans serif。其中 typewriter 打字機字體，雖然也是 sans serif，但由於他是等距字，所以另獨立出一個 Typewriter 字族出來。2008-08-08
屏蔽IE瀏覽器（也就是IE下不顯示）2008-12-12
CSS網(wǎng)頁布局中不推薦使用的HTML標簽，請盡量不要使用這些HTML標簽。2008-09-09
input的字段當(dāng)為diabled時時無法獲取數(shù)值得，所以最近不要用這個，我們可以用readonly帶替代，即可解決這類問題2008-09-09
Pjblog模板制作教程 超強推薦...2007-02-02
在XHTML標簽中有一些標簽的作用是相似的，當(dāng)然這里的相似是指語義相似，以至于很多人都不清楚這些相似的標簽如何使用，那么今天的主題就是分解相似的標簽，明確各個標簽的用途。2008-06-06
內(nèi)容再豐富的網(wǎng)站，如果慢到無法訪問也是毫無意義的； SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭； UE設(shè)計的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。2008-09-09