用less实现div效果

最新推荐文章于 2023-07-04 15:46:43 发布

weixin_30670925

最新推荐文章于 2023-07-04 15:46:43 发布

阅读量538

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guangyuan/p/7069911.html

<!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;
}