CSS-布局样式之筛选条件右边线的处理方法(no CSS3)

简介: 先上图:这个地方的竖线,首先他不用css3的nth-child或last-child的选择器来解决的话,还有什么更好的方法呢?如果我还用上次优惠券那种,加一个的话,类似如下以后不可能就三个标签,以后程序往里边传东西肯定又会改变了,于是鄙人开始寻找大型网站的相同效果的处理方法找到三种处理方法1:易车惠:http://www.huimaiche.com/   底部的外网链接他的处理方式是a+em,em包含竖线。

先上图:

这个地方的竖线,首先他不用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>

 

目录
相关文章
|
3天前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
10 2
|
5天前
|
前端开发
尚硅谷html5+css3(3)布局
尚硅谷html5+css3(3)布局
|
5天前
|
缓存 前端开发 JavaScript
尚硅谷html5+css3(2)CSS5基本知识
尚硅谷html5+css3(2)CSS5基本知识
|
5天前
|
小程序 前端开发 JavaScript
使用CSS的媒体查询功能在小程序中实现自适应布局
使用CSS的媒体查询功能在小程序中实现自适应布局
|
6天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
14 1
|
9天前
|
前端开发 容器
前端 CSS 经典:grid 栅格布局(下)
前端 CSS 经典:grid 栅格布局(下)
20 0
|
9天前
|
前端开发 容器
前端 CSS 经典:grid 栅格布局(上)
前端 CSS 经典:grid 栅格布局(上)
18 0
|
12天前
|
前端开发 容器
前端 css 经典:grid 栅格布局
前端 css 经典:grid 栅格布局
17 1
|
14天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
38 0
|
前端开发 容器 JavaScript
CSS Grid布局入门
相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。
1135 0