用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 条评论
登录 后参与评论

相关文章

来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

3355
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系   限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在over...

3308
来自专栏十月梦想

边框阴影

681
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

1668
来自专栏微信小程序开发

微信小程序具备哪些API能力,你都清楚嘛?

知晓程序员,专注微信小程序开发的程序员! 前言:微信小程序具备哪些功能,官网上已有说明。有同学已经做了细心整理,包括网络、媒体、文件、数据缓存、位置、界面、设备...

3147
来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

1909
来自专栏DannyHoo的专栏

单元格的点击问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

821
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

1795
来自专栏互联网研发闲思录

一个线上缓存异常

  最近线上应用发现了一个问题,系统启动构建缓存会出现缓存数据为空的情况,仔细分析整个流程 ,开始以为是代码疏忽导致bug,后来在仔细分析整个流程发现是由于a缓...

1910
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

18910

扫码关注云+社区