标签：abs com col world htm nsf 文件 截图 选择器
在有的网页中，我们会看到图中这样的标题样式
我能先想到的有两种解决方法：
一是截图，用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教程
标签：abs com col world htm nsf 文件 截图 选择器
原文地址：http://www.cnblogs.com/lh101200/p/7647380.html
