<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="js/less.min.js"></script>
</head>
<body>
<hr/>
<hr/>
<hr/>
<hr/>
<hr/>
<br/>
<br/>
<br/>
<div class="div">
<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>
<li><a href="">火箭</a></li>
</ul>
</div>
<br/>
<hr/>
<hr/>
<hr/>
<hr/>
<br/>
<br/>
<br/>
<br/>
<div class="div1">
<ul>
<li><a href="">香蕉 </a></li>
<li><a href="">苹果</a></li>
<li><a href="">雪梨</a></li>
<li><a href="">橙子</a></li>
</ul>
</div>
</body>
</html>
@color: red;
@list-style: none;
@text-decoration: none;
@float:left;
@margin: auto 100px;
@background-color:cyan;
@line-height: 100px;
@height:100px;
@width:100px;
@text-align: center;
.div{
height: @height;
}
.div>ul>li>a{
text-decoration:@text-decoration;
}
.div>ul>li{
margin: @margin;
float: @float;
list-style:@list-style;
}
.div>ul>li>a:hover{
color:@color
}
.div1{
line-height: @line-height;
text-align: @text-align;
height: @height;
}
.div1>ul>li>a{
text-decoration:@text-decoration;
}
.div1>ul>li{
line-height: @line-height;
margin: @margin;
float: @float;
list-style: @list-style;
}
.div1>ul>li:hover{
text-align: @text-align;
width: @width;
height: @height;
background-color: @background-color;
}
.div>ul>li>a:hover{
color: @color;
}
