你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

用TAOBAO的方法隐藏多余的线条

表现 练习 13535浏览 5评论

偶然的看到了TAOBAO UED团队的BLOG,在上面看到了篇文章,说的是怎么隐藏导航最后一项的竖线

1、类目之间的横竖线

03.jpg

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

1、背景图

在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。

缺点:最后一个还是要用class来隐藏掉背景。

2、符号

在每个a标签之间用”|”符号来填充。

缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。

3、a标签右侧的boder。

同背景图一样,只不过使用border-right来代替。缺点也同上。

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

其实现有是利用ul的overflow:hidden 再将li的margin-left:-1px的做法做出来的。这样的做法就可以同时避免以上的缺点了。

其实这种方法我们可以在很多地方都用的到,比如

02.jpg

转载请注明:练小习的前端技术笔记 » 用TAOBAO的方法隐藏多余的线条

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (5)

  1. 前段真的需要思考,那么简单我怎么就想不到
    zhouqi11年前 (2009-11-27)回复
  2. 很实用,呵呵,收藏了。 不过你写错了一点,就是淘宝是使用border-left实现的,而不是border-right。 再次感谢博主。
    kilobug12年前 (2009-02-22)回复
  3. 站长您好,真诚与你做交换链接!我刚做BLOG,望指教
    cnpabi13年前 (2008-02-17)回复
  4. 感觉实用价值不大。。但还是收藏吧。。
    neekey13年前 (2008-02-17)回复
  5. 不是吧 朋友刚才我去雅虎统计查了一下链向贵站的网页,结果发现只有我的博客链接向您的啊!支持了!
    Soku13年前 (2008-02-17)回复