分享、学习、提高
2010/04/23 20:45
文章作者:Enjoy 转载请注明原文链接。
需要下图的效果,你会怎么实现呢?
点击在新窗口中浏览此图片

是不是考虑用这个?
<a href="#">整机</a>|<a href="#">LCD</a>

我们来看看taobao和paipai对这块的实现,这两个站首页罗例产品分类时,都使用了这种样式:

paipai的实现
a{
border-left: 1px solid #D9D9D9;
margin-left: -1px;
padding-left: 5px;
}

taobao的实现:
a{
border-left: 1px solid #B7D0E4;
display: inline-block;
margin-left: -1px;
padding: 0px 0px 0px 3px;
}

现在你会了吗?


这段CSS很巧妙的将margin-left设为-1,将第一个border隐藏了起来,而且兼容所有的主流浏览器。这样,就不用给第一个或者最后一个样式做特殊样式处理了。如果间隔需要大些,可以很方便的通过设置padding-left和padding-right来控制。
aaaa
2015/03/18 18:47
[emot]anger[/emot]
武汉seo Email Homepage
2010/05/12 00:02
这个用css控制的方法不错,学习了!
服饰搭配 Homepage
2010/05/09 14:00
不错,是个好方法,一直想不懂,既然margin-left:-1,应该全都都没有才对,为什么加个padding-left:5px;第一个确没有线,其他的有
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写