hello大家好,今天晚上我想说一下分隔线的写法,总所周知,在网页设计中我们会碰到很多分隔线,在我最新的项目小米商城中,我更是不止一次的遇到了分隔线,一般情况下分隔线用边框线设置就可以,但是遇到这种复杂的情况我们就需要用到伪类去写分隔线了。
小米商城分隔线:
上面的分隔线用边框去设置就显得比较困难,所以今天我就来详细说一下如何用伪类做分割线。
首先我们需要确定我们添加分隔线的位置,以我为例在我做这个项目的时候,需要加分隔符的地方都是在li列表中,这里我拿比较难的第一张图片中的分隔线方式举例:
div class="csbox2">
<ul>
<li>
<a href="#"><i class="iconfont"></i><span>保障服务</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>企业团购</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>F码通道</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>米粉卡</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>以旧换新</span></a>
</li>
<li>
<a href="#"><i class="iconfont"></i><span>话费服务</span></a>
</ul>
</div>
需要添加的位置如上面代码的位置,所以我们在li的位置添加伪类元素即可,不用在html中添加,直接在css的文件中添加,需要注意的是第一张图中有竖线和横线两种分隔线,所以我们要设置两个伪类代表两种不同的分隔线,代码具体如下:
.csbox2 li::after {
content: "";
width: 1px;
height: 70px;
position: absolute;
top: 7px;
left: 0px;
background-color: rgb(102, 94, 87);
}
.csbox2 li::before {
content: "";
width: 65px;
height: 1px;
position: absolute;
top: 0px;
left: 6px;
background-color: rgb(102, 94, 87);
}
注意要选对位置,确定好需要分隔线的li,再给其一个伪类用after后者before都可以,这里我们两者都用上了,宽高可以控制你想要横线还是竖线,还需要对其进行一个绝对定位,与此同时还要给这个li标签一个相对定位,因为这个伪类元素是根据li的位置设定的,top值和left值是给这个线调制位置的,在网页检查中我们可以自由设定偏移量,然后最后把设定好的位置再写入css中,然后最后再给这个伪元素一个背景颜色,就可以写出一个分隔线了,大家可以根据我写的东西练习一下,这个是非常方便的,我们后面可以经常用到。
那么今天就先说到这里哦,谢谢大家的观看,我们明天再见!