<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<style type="text/css">
.conten ul{
list-style: none;
}
.conten li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
}
.conten li a{
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
/*less的写法如下*/
//只会在LESS中显示
/*就会在LESS和CSS中显示*/
@charset "UTF-8"
.conten {
ul{
list-style: none;
}
li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a{ //不会继承父的样式，css反映了html标签的父子关系
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
</style>
</head>
<body>
<div class="conten">
<ul>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet/less" href="style.less"/>
<script src="less.min.js"></script>
</head>
<body>
<div class="conten">
<ul>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
</ul>
</div>
</body>
</html>
