跟Howard学LESS之初见LESS

发布时间：2020-06-17 20:41:08 作者：howardvictor
来源：网络阅读：191

跟Howard学LESS之初见LESS，上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跟Howard学LESS之初见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的写法如下*/
        .conten {
            ul{
                list-style: none;
            }
            li{
                height: 25px;
                line-height: 25px;
                padding-left: 15px;
                background: url("arr.jpg") no-repeat center left;
                a{
                    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="http://www.quban18.com/shiwuquban/dasuanquban/">大蒜祛斑</a>这是测试文档</li>
        <li><a href="http://www.quban18.com/zhongyaoquban/">中药祛斑</a>这是测试文档</li>
        <li><a href="http://www.quban18.com/shiwuquban/dasuanquban/">大蒜祛斑</a>这是测试文档</li>
    </ul>
</div>
</body>
</html>

Less部份：

.conten {
ul{
list-style: none;
}
li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a{
text-decoration: none;
color: #535353;
font-family: microsoft yahei, Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}

跟Howard学LESS之初见LESS

相关阅读