先上图：

这个地方的竖线，首先他不用css3的nth-child或last-child的选择器来解决的话，还有什么更好的方法呢？

如果我还用上次优惠券那种，加一个<b>的话，类似如下

以后不可能就三个标签，以后程序往里边传东西肯定又会改变了，

于是鄙人开始寻找大型网站的相同效果的处理方法

找到三种处理方法

1：易车惠：http://www.huimaiche.com/   底部的外网链接

他的处理方式是a+em，em包含竖线。

但这种的布局，首先a是独立的内联元素，没有固定搭档的说法，不像li和ul，dd和dt。所以他可以和span做兄弟。

其次，他的兄弟数量是固定下来的，不用后台再传进来东西。

而我这种页面布局，最终数目都是看用户的心情，到底几个都是随机的，不可能会有固定数目的。

2：天猫首页侧边导航栏这个斜线：

处理方法是几个文字用a标签包裹，而斜线写在a标签之间，作为li标签的内容文本。

人家这种处理方式适合，文字与装饰线条都是统一颜色，另外文字用一个链接就行了很单纯。

不像现在面临的这种布局——其特点在于：

（1）：有一个需要dt标签来存放的一级目录；

（2）：二级目录和斜线的颜色不一样；

（3）：二级目录之间，除了不变的汉字，还有需要更改的数值，如图：

　　

全部和5要分开标签吧。结构很零碎，想做到简单很麻烦。

3：天猫首页搜索栏下边的热点导航条：

他这种，竖线使用border写的，很符合我的要求。更惊喜的是：其实现方法也打开了我的新思路，有句话怎么说来着，茅厕顿开。哈哈哈：

看到这种布局，像我这种菜鸟，第一时间想到的肯定是用border-right实现吧！但是！他用border-left实现的。。

我想我看到他border-left后，瞬间恍然大悟他的处理方式了。

我还在想，难道第一个li要用css3的first-child？那和last-child 没有什么不同吧。

结果我看第一个li，还有啊！border-left还在啊！没有用border：none处理掉啊！

经过盒模型的显示，我才看懂他使用了margin的负边距布局这个经典方法啊。

如下：盒模型图

Ul的爹地div

ul

就是，让ul的margin-left为负值，把第一个li左边的border给推出去啊。

关键点是，div还要设置overflow：hidden；不然这个魔术是变不成功的啊。

另外，这种做法中，border是加在li上边的，li的line-height:1.1；没有单位，这样的话，竖线和文字的高度是一样的，不会出现那种冒出头的雨后春笋。

我后来自己设计的时候，把border给了dd内部的a标签，然后让第一个a 的margin-left为-2，让dd的overflow：hidden，然后把line-height给了dd，

bug接踵而至，三个dd就和dt变得在一个高度上了，

行高给了a却没用，竖线还是出头，于是我就给了dd也给了dt，这样，高度就想通了。

最后，上代码：

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta name="author" content "郭菊锋,702004176@qq.com"/>
 7         <title>list</title>
 8         <style type="text/css">
 9             * {10                 margin: 0;
11             }
12
13             a {14                 text-decoration: none;
15             }
16
17             a:hover {18                 cursor: pointer;
19             }
20
21             li {22                 list-style: none;
23             }
24
25             .clearfix:after {26                 visibility: hidden;
27                 display: block;
28                 font-size: 0;
29                 content: "";
30                 clear: both;
31                 height: 0;
32             }
33
34             .clearfix {35                 *zoom: 1;
36             }
37
38             .menu {39                 width: 1100px;
40                 margin: 130px auto;
41                 padding: 10px;
42                 background: #DFE9F6;
43                 font-size: 16px;
44                 border-bottom: 1px dashed #DB7093;
45             }
46
47             .menu dt {48                 float: left;
49                 color: #999;
50                 line-height: 1.1;
51             }
52
53             .menu dd {54                 float: left;
55                 overflow: hidden;
56                 line-height: 1.1;
57             }
58
59             .menu dd a {60                 padding: 0 12px;
61                 color: #333;
62                 border-left: 2px solid #DB7093;
63             }
64
65             .menu dd.menu_active a,
66             .menu dd a:hover {67                 color: #DB7093
68             }
69         </style>
70     </head>
71
72     <body>
73         <dl class="menu clearfix">
74             <dt>品牌：</dt>
75             <dd class="menu_active">
76                 <a href="#" title="" style="margin-left: -2px;">全部</a>
77             </dd>
78             <dd>
79                 <a href="#" title="">第一</a>
80             </dd>
81             <dd>
82                 <a href="#" title="">第二</a>
83             </dd>
84             <dd>
85                 <a href="#" title="">第三</a>
86             </dd>
87             <dd>
88                 <a href="#" title="">第四</a>
89             </dd>
90         </dl>
91     </body>
92 </html>

CSS-布局样式之筛选条件右边线的处理方法（no CSS3）相关推荐

  1. html语言两端对齐末行首对齐,css两端对齐之div+css布局实现2端对齐的4种方法总结...

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. 1 2 3 1.margin负值的方式 ...

  2. web前端——html基础笔记 NO.12｛css布局模型（流动，浮动，层模型）｝

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  3. css布局模型(摘抄自慕课)

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  4. html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）

    本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...

  5. CSS布局模型/网页布局基础

    CSS布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  6. 【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）

    使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...

  7. html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...

    CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...

  8. div css网页设计源代码_HTML+CSS网页设计，企业网站服务项目布局样式

    大家好,本篇文章分享企业网站服务项目的布局样式,这种布局样式通常用于企业网站首页,企业可以向客户提供的服务内容,不同类型的企业服务项目样式也不同,这只是其中一种. 效果图: 服务项目 HTML代码: ...

  9. div css网页设计源代码_HTML+CSS网页设计，企业网站资讯文章布局样式

    大家好,本篇文章分享企业网站资讯文章的布局样式,这种布局样式通常用于企业网站首页. 效果图: 资讯文章 HTML代码: 最新资讯 Newest information 高效简洁但稳定实用的网站程序20 ...

最新文章

  1. 【数据库优化专题】MySQL视图优化（一）
  2. 行走在泰国的7天8夜（曼谷篇-汤姆吉普森故居·四面佛·美食篇）
  3. Java---Socket编程UDP/TCP
  4. 解决远程登录MYSQL数据库
  5. php 类分开写,程序员面试必备PHP基础面试题 – 第十七天
  6. python mysql异常处理_python-处理PyMySql异常-最佳做法
  7. BZOJ 1502：月下柠檬树
  8. Windows 7 Ultimate + Ubuntu 12.04 LTS双系统完美走起
  9. 面试题50. 第一个只出现一次的字符
  10. Shell 脚本 ssh免密码 登录 远程服务器 sshpass用法示例
  11. laravel5.5通过yansongda/pay组件实现支付宝电脑网站支付
  12. 相控阵天线面阵方向图（FFT变换）
  13. redis 客户端连接及常用命令使用
  14. 老路《用得上的商学课》学习开篇（自序）
  15. 随机存储器：SRAM、DRAM、SDRAM的区别
  16. ubuntu vscode c++生成so及调用调试so包
  17. Java使用itextpdf根据关键词插入图片
  18. 把笔记本改造成无线路由器 —— 手机抓包牛刀小试
  19. 响应式极简新闻发布系统模板 v4.88
  20. 非关系型KV数据库-Redis-01

热门文章

  1. linux下查看cc攻击
  2. 蛋花花：互联网正在告别青春期
  3. 阿里云云服务器安装jdk、mysql
  4. 一个自定义python分布式爬虫框架。
  5. iOS开发笔记（十七）：持久化方案之 NSUserDefaults
  6. tf.variable和tf.get_Variable以及tf.name_scope和tf.variable_scope的区别
  7. JSP自定义标签之简单标签入门
  8. Apache多站点设定
  9. Zabbix 监控Mysql 主从状态（Python脚本）
  10. 耗时很长的服务器端事件中让客户端得到中间过程信息的合理解决方案