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

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

1、类目之间的横竖线

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

1、背景图

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

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

2、符号

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

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

3、a标签右侧的boder。

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

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

React 系列教程 1:实现 Animate.css 官网效果

3842
来自专栏DeveWork

Fontello:免费Web-font 图标大集合(font-face 图标集)

当我知道这个网站的存在,我就知道我非常有必要将此分享给大家。Fontello,一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设...

2296
来自专栏编程微刊

jQuery实现多种切换效果的图片切换的五款插件

1711
来自专栏Python自动化测试

selenium中对富文本的处理

在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是...

1363
来自专栏IMWeb前端团队

浅尝iconfont

1. iconfont简介 什么是iconfont?正如字面意思,就是图标字体,下面我给大家慢慢道来 web页面包含什么元素? 文字 链接 流媒体 视频 音频 ...

2777
来自专栏非著名程序员

推荐几个比较炫酷效果的开源项目和开源库

上次推送了一篇关于推荐开源项目和开源库的文章,引起的反响不错,那我就持续搞下去,继续分享我收藏和看到的不错的开源库。相信这些推送应该对大家的帮助很大。 Shin...

2638
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

1675
来自专栏姬小光

姬小光前端兴趣班【第010期】- 浏览器开发工具

前面几期我们学习了切图大法,我相信只要你认真学完,就可以立即派上用场。比如可以将你喜欢的图片切成个人主页,也可以将贺卡图片做成带链接的邮件等等。

802
来自专栏做全栈攻城狮

Windows桌面软件开发-Win桌面客户端开发神器 第二课

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

2634
来自专栏IMWeb前端团队

怎样打造一个DOM元素位置引擎 (一)

本文作者:IMWeb forsigner 原文出处:IMWeb社区 未经同意,禁止转载 碎碎念 这是一篇早就应该写的文章,但是由于过年前项目紧张,一直...

18710

扫码关注云+社区