标题两边的横线

Posted 2020-10-10

在有的网页中，我们会看到图中这样的标题样式

我能先想到的有两种解决方法：

　　一是截图，用background的方法;

　　二是用伪对象选择器before和after

那我现在要介绍的第三种方法是less。使用less要引进less.js文件，然后创建less文件，就像创建css文件一样，但是要注意的一个细节就是<link rel="stylesheet/less" href="less/style.less" />,接下来就进入正题啦！

html代码

1 <section class="sec">
2     <h2 class="title" data-text="hello world"></h2>
3 </section>

 

less样式

 

 1 @charset "UTF-8";
 2 .transform{
 3         -webkit-transform:translate(-50%,-50%);
 4         -moz-transform:translate(-50%,-50%);
 5         -ms-transform:translate(-50%,-50%);
 6         -0-transform:translate(-50%,-50%);
 7         transform:translate(-50%,-50%);
 8 }
 9 @bg:orange;//这里的orange颜色是可变滴
10 .sec{
11     height:100vh;
12     border-top:1px solid transparent;
13     background:@bg;
14     h2{
15        .title(@bg-color:@bg)
16     }
17 }
18 @red:orange;
19 .title (@bg-color:white){
20     width:900px;
21     margin:50px auto;
22     position:relative;
23     &:before{
24         content:"";
25         display:block;
26         border-top:1px solid black;
27     }          
28     &:after{
29         content:attr(data-text);
30         position:absolute;
31         top:0;
32         left:50%;
33         padding:0 30%;
34         background:@bg-color;
35         .transform;
36     }
37 }

 

 

要细心哦，不要把less样式写在css样式里！！！

要学习less的同学可以去这里：http://www.bootcss.com/   里面的Less教程