文档章节

类目之间的横竖线效果的实现

sunshinewyf
 sunshinewyf
发布于 2015/08/12 11:32
字数 519
阅读 45
收藏 1

今天看了http://ued.taobao.org/blog中的一篇前端文章《段正淳的css笔记(1) 》,里面讲到了关于实现类目之间的横竖线的问题,并且引发了业界大牛的一系列争议。
对于我来说,我是本着学知识的态度去的,所以这里仅仅记录一下实现这种效果的几种方法,并且添加自己发现的另一种方法:
1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点:最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点:html文件变大,文件维护变得很麻烦,而且在html中毫无意义。

3、a标签右侧的boder。
同背景图一样,只不过使用border-right来代替。缺点也同上。

4:段王爷的那种思想我以代码的效果显示,因为说得有点小简单了:
html代码:
        <ul>
        <li>第一块</li>
        <li>第二块</li>
        <li>第三块</li>
        <li>第四块</li>
        <li>第五块</li>
        </ul>
    css代码:
        *{margin:0; padding:0; list-style:none;}
        ul{overflow: hidden;}
        li{width:80px;height: 40px;background-color: #e8e8e8;text-align: center;color:#fff;line-height: 40px;float: left;margin-left:-1px; display:inline; border-right: 1px solid #666666;}
但是我不知道为什么我在firebug中只有将margin-left设置为 0 的时候才有效果
5:我在天猫中看到了另外一种方法

html代码:
        <ul>
        <li>第一块</li>
        <li>第二块</li>
        <li class="border"></li>
        <li>第三块</li>
        <li>第四块</li>
        <li>第五块</li>
        </ul>
在html中加一个空的li标签显示竖线

css代码:
        *{margin:0; padding:0; list-style:none;}
        ul{overflow: hidden;}
        li{width:80px;height: 40px;background-color: #e8e8e8;text-align: center;color:#fff;line-height: 40px;float: left;}
        .border{width:0;height: 40px;display: inline-block;vertical-align: top;position: relative;font-size: 0px;border-left:1px solid #666666;}

    总结到这里的唯一感觉就是:大牛们研究的问题就是深入,一些小细节也会考虑到这么多方法,所以以后也要往细节方面考虑

© 著作权归作者所有

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
[CSS]CSS:类目之间的竖线问题

现在就来说个淘宝首页上的一个小技巧。  1、类目之间的横竖线  从很久很久以前开始,类目间的竖线无非都只有三种。  1、背景图  在a标签设置一个padding 用宽1px高不等的背景图来pos...

xcntime
2010/08/11
266
0
AutoFlowLayout:多功能流式布局与网格布局控件

近期工作需要用到流式布局,网上也有很多关于这方面的资料。发现流式布局与网格布局的自定义很有意思,是学习自定义控件的一个很好的方式,所以就撸了个几百行代码的控件,既实用又具有学习价...

2017/08/07
0
0
ConstraintLayout在项目中实践与总结

ConstraintLayout,让布局更优雅。 一、为什么要用ConstraintLayout image.jpg 上图是网易100分的选课首页,在Banner图的下部是推荐类目模块,其中数学、语言、小低和小高分别是推荐类目Ite...

宇是我
2017/11/30
0
0
横竖屏检测方法

方案一: 代码添加上后,就各种兼容性问题。这里兼容性问题出现在两个地方: 如下是事件的兼容性: 如下是的兼容性: 方案二: 上述方案不行,只能另行他法了。google一下,了解到可以通过配...

小马_wolf
2016/09/13
15
0
基于DNN+GBDT的Query类目预测融合模型

1. Query类目预测与分析 用户搜索意图的理解在搜索排序体系下有着重要的作用。要理解用户的意图,一部分可以通过用户的关键词文本来理解语义上的意图;另一方面可以通过用户的行为积累来获得...

吴嘉伟怀风
2018/02/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS实现使用Math.random()函数生成n到m间的随机数字

Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n...

张兴华ZHero
23分钟前
4
0
入门了解Service Mesh + Istio?从本文开始

下周六,深圳,阔别已久的线下技术沙龙要和你见面啦! 现场有Rancher Labs研发经理demo刚刚发布的Rancher 2.3中的Istio、Windows容器、集群模板等功能及使用,还有k3s首次线下workshop,由R...

RancherLabs
25分钟前
4
0
Gradle 发布 Jar 到 Archiva 时提示不能 Overwriting released artifacts is not allowed

系统提示错误信息: Received status code 409 from server: Overwriting released artifacts is not allowed. 这是在 Archiva 默认的配置下如果你不是使用 snapshot 配置的话,是不允许对仓...

honeymoose
26分钟前
4
0
二维码插件之qrcode.min.js

文件链接百度云地址 https://pan.baidu.com/s/1nWiBuT4Z7WOAMoUEFL8PZg 入门 http://www.jq22.com/jquery-info294 使用jquery.qrcode.min.js实现前台二维码生成(带Logo) https://blog.csd......

木九天
36分钟前
3
0
开源 java CMS - FreeCMS2.8 自定义标签 commentPage

项目地址:http://www.freeteam.cn/ commentPage 根据参数提取评论对象。 参数 说明 siteid 站点id objtype 评论对象类型 objid 评论对象id membername 会员名称 isanonymous 是否匿名 1是 ...

freeteam
36分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部