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

相关文章

来自专栏iKcamp

iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源

视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静。 指定静态资源目录 这里我们使用第...

4167
来自专栏项勇

Android 8.0 “奥利奥”正式发布

1364
来自专栏IMWeb前端团队

下手响应式及断点设置分析

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都...

1727
来自专栏landv

【转】使用DirectUI技术实现QQ界面

1635
来自专栏Android 开发者

Android P Beta 3 现已发布!

1544
来自专栏Android 开发者

Android 支持库 v26 有哪些变化?

1533
来自专栏Java技术栈

Java开发必知道的国外10大网站

1、https://www.google.com/ ? 不解释 2、https://stackoverflow.com ? 里面包含各种开发遇到的问题及答案,质...

3377
来自专栏九彩拼盘的叨叨叨

web前端网站收藏

982
来自专栏张善友的专栏

ASP.NET MVC 4, ASP.NET Web API 和ASP.NET Web Pages v2(Razor)现在都是开源了

[原文发表地址] ASP.NET MVC 4, ASP.NET Web API and ASP.NET Web Pages v2 (Razor) now all...

1836
来自专栏知晓程序

如何删除小程序缓存 / 小程序列表能同步吗 / 追剧小程序推荐 | 小程序问答 #11

不知道有多少人在用微信谈工作?每次向对方用纯文字介绍自己的时候,都觉得低效又不美观。

883

扫码关注云+社区