淘宝段正淳的css笔记大全第1/4页
更新时间：2007年10月25日 11:12:38 作者：
试想过总结出这几年来写css与xhtml的经验 ，汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高，真是有点力不从心了。于是转念一想，可以用笔记的形式展现，这样就不用担心写不出来了。
现在就来说个淘宝首页上的一个小技巧。
类目之间的横竖线
从很久很久以前开始，类目间的竖线无非都只有三种。
- 背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。 - 符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。 - a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。
看到这里，可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。
其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的，寡人也不知道了。难道寡人是第一个发现这样的做法？
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。
相关文章
惊叹于老外的发现 《CSS Background image on html image element?》，自己从没关注过，也没想过如此的问题。2009-04-04
布局用CSS+DIV的优点总结...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网页布局中不推荐使用的HTML标签，请尽量不要使用这些HTML标签。2008-09-09
input的字段当为diabled时时无法获取数值得，所以最近不要用这个，我们可以用readonly带替代，即可解决这类问题2008-09-09
Pjblog模板制作教程 超强推荐...2007-02-02
在XHTML标签中有一些标签的作用是相似的，当然这里的相似是指语义相似，以至于很多人都不清楚这些相似的标签如何使用，那么今天的主题就是分解相似的标签，明确各个标签的用途。2008-06-06
内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。2008-09-09
最新评论