用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 DOM(二):节点的增删改查

       上一篇:HTML DOM(一)        上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点、...

35100
来自专栏Thinks

腾讯网新闻底层页无障碍代码细节

本周一部署在新闻频道并得到可反馈和升级。 现已部署在新闻频道、财经频道、体育频道、娱乐频道、公益频道。 主要针对于盲人用户使用的屏幕阅读器在阅读新闻底层页(新闻...

8310
来自专栏高爽的专栏

HTML图片热点

       目前在改进内部系统的一个功能,前端给出了效果图,从前段到后端都需要自己来写了,好在自己对前端的技术也略有涉猎。        页面需要实现一个按钮...

45600
来自专栏Thinks

表格边框你知多少

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意...

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

HTML标准

在世界的任何一个角落,每个网络浏览器都以同一种方式显示HTML文件。理想情况下,任何一台电脑上的任何一个浏览器软件对每个HTML标识符应当以相同的方式解释,并有...

24200
来自专栏高爽的专栏

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,Java...

28600
来自专栏Thinks

SEO简易规范

最通用和安全的SEO规范 Title: l 采用倒装的格式 l 当前页面 – 父级 – 父级的父级 – 腾讯云 注:如果大于四级,请拉群协商;翻页不算级别;...

8110
来自专栏西安-晁州

让div铺满整个空间

需要用到几个css属性: .content{ width:100%;position: absolute;top: 50px;bottom: 0px;le...

22700
来自专栏高爽的专栏

HTML发送邮件链接

        大家点击我的博客主页详细资料里的邮箱就可以给我发邮件了,那么这个效果是怎么实现的呢?         1. 简单的链接         效果:给...

76200
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

9410

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励