CSS技巧 类目之间的横竖线

2008-9-20 11:37:12　　作者：模板天下收集整理　　来源：未知　网友评论 0 条　论坛

　　

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

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的网页我的大脑会自动屏蔽。

共分1页  [1]

>> 相关文章