demo_02 less

html 中的代码<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet/less" type="text/css" href="css/style.less"/>
        <script src="js/less.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div>0</div>
        <ul>
            <li class="special">1</li>
            <li>2</li>
            <li class="special"><a class="a">3</a></li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

css中Less文件内容

@background-color:#f66;
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.border-shadow(@x,@y,@z,@color){
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}
@base-color: #111;
@red: #842210;

.border{
    border: 20px solid #ddd;
    text-align: center;
    margin-top: 3px;
    .border-radius(5px);
    .border-shadow(3px,3px,5px,#000);
  //  color: @base-color + #003300;
     // 饱和度降低 10%
   // border-color: desaturate(@red, 10%);
}
div{
    width: 120px;
    height: 120px;
    background: @background-color;
    .border;
}
ul>li{
    width: 50px;
    height: 20px;
    background: @background-color;
    .border;
    &.special{
        font-size: 40px;
        .a{
            color: red;
        }
    }

}

js中的less.min.js可以自行到网上下载，最新版本的即可。

时间： 2024-10-13 15:22:28

demo_02 less的相关文章

9.25作业

class Demo_01 {    public static void main(String[] args)     {        System.out.println("5+5="+5+5);    }} class Demo_02 {    public static void main(String[] args)     {        int a=3,b;        b=a++;        System.out.println("a="

IO流——各种流整理

最简单的,不加任何修饰的字节输入流 1 /* 2 * 最简单的,不加任何修饰的字节输入流 3 */ 4 import java.io.FileInputStream; 5 6 public class Demo_01 { 7 public static void main(String[] args) throws Exception { 8 FileInputStream file=new FileInputStream("D:\\myjavacode\\IO\\src\\abc.txt&qu