在有的網頁中，我們會看到圖中這樣的標題樣式

我能先想到的有兩種解決方法：

　　一是截圖，用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教程

?

?

　　

?

?

?

轉載于:https://www.cnblogs.com/lh101200/p/7647380.html

總結

以上是生活随笔為你收集整理的标题两边的横线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。