看到以前的代码复习一下。
点:1.画出1px的线,利用伪元素
2.利用animate第三方来做炫酷的特效
html:
<div class="bottom">
<div class="bottom_center">
<img class="one" src="./images/logo.png" alt="">
<div class="animated zoomInUp two">企业级区块链解决方案</div>
<div class="animated zoomInDown three">Enterprise-Class Solution Based On Blockchain</div>
<div class="four">
<i class="iconfont icon-yuandianxiao left"></i>
<i class="iconfont icon-yuandianxiao right"></i>
致力于服务中小型企业和机构,为中小型企业提供区块链技术支持和区块链行业解决方案
</div>
</div>
</div>
css:
.page1 .bottom .bottom_center .four::before,
.page1 .bottom .bottom_center .four::after{
content:"";/*内容为空*/
display:inline-block;/*使得显示伪类的方式为行内块*/**
border-top:1px solid aliceblue; /*1px的细线,也可以直接用宽高*/
width: 100px;
position: relative;/*通过相对定位的方式以自己的位置微调位置*/
top:-6px;
left:10px;
}
这里用的时伪元素,说到这里,之前面试被问到伪元素与伪类的区别,说说自己的理解
定义的区别:
伪类:伪类用于选择DOM数之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如::visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素比如:first-child,:first-of-type,:target。
伪元素:伪元素为DOM数没有定义的虚拟元素,不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如。比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。注意:需要给伪元素定义 content 值为空和定义伪元素为block才会正常显示伪元素,模拟为div元素。