类目之间的横竖线 - 段正淳的css笔记(1)

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高,真是有点力不从心了。于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了。

现在就来说个淘宝首页上的一个小技巧。

1、类目之间的竖线
类目见的横线

从很久很久以前开始,类目间的竖线无非都只有三种。

1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点:最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。

3、a标签右侧的boder。
同背景图一样,只不过使用border-right来代替。缺点也同上。

看到这里,可能已经有人打开淘宝首页用firebug查看源码来看是怎么做了。

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。
为什么之前都没有那么做的,寡人也不知道了。难道寡人是第一个发现这样的做法?
不管是谁先此之前利用了这样的方法实现类目间竖线。
不过在淘宝首页上线后不久就有同行的网站在首页改版中也用了这样的方法。
那个网站不看也罢。class实在是写的有点多。加载html会变得多得多。
反正一个首页需要加载1.17m的网页我的大脑会自动屏蔽。

好了,希望这篇文章是个好的开始。另,还有72小时,寡人就在淘宝待满3年了,镇南王已经成为阿里人了。

转自:http://ued.taobao.com/blog/2007/08/12/css-notes/

时间:01月10日 10:01  标签: css 笔记 xhtml 转贴摘录
作者:eason007  网址:http://www.w2blog.net/view/262.html
可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息
自定义搜索
本文相关评论(Comments) 订阅该Blog下的评论RSS
本文还没有评论,来给楼主说几句吧...
发表评论(点击右边的小按钮打开或关闭表单)  点击打开表单
分类导航
我的滔滔
文章导读
最新评论
RSS订阅
寻欢翼翼的孤寂人生
我的豆瓣秀