zoukankan      html  css  js  c++  java
  • 用less实现div效果

    <!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;
    @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;
    height: @height;
    background-color: @background-color;
    }
    .div>ul>li>a:hover{
    color: @color;
    }
  • 相关阅读:
    截取图片中间部分
    chrome调试手机webview中页面
    页面中如何让标点不出现在行首
    jquery checkbox checked 却不显示对勾
    thinkphp 5.x No input file specified 解决
    常用的一些子域名,旁站等查询网站
    Windows应急日志常用的几个事件ID
    fsockopen反弹shell脚本
    LOG日志溯源取证总结
    交互式shell脚本web console
  • 原文地址:https://www.cnblogs.com/guangyuan/p/7069911.html
Copyright © 2011-2022 走看看