zoukankan      html  css  js  c++  java
  • Less的学习(一)

    1、html部分

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link rel="stylesheet/less" type="text/css" href="less/test.less" />
        <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
        <script></script>
    </head>
    <body>
        <div id="header" style="border:1px solid red;">XXXXXXXXXXXXXXXXX<p>aaaaa</p></div>
        <h2 style="border:1px solid blue;">111111</h2>
    </body>
    </html>

    2、less/test.less文件内容

    @color:#4D926F;
    
    .rounded-corners (@radius: 5px) {
       -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
       -ms-border-radius: @radius;
       -o-border-radius: @radius;
       border-radius: @radius;
    }
    
    
    #header {
       color:@color;
       .rounded-corners(10px);
    }
    h2 {
       color:@color;
       .rounded-corners;
    }
    
    
    #header {
       h1 {
          font-size: 26px;
          font-weight: bold;
       }
       p {
          font-size: 12px;
          a {
             text-decoration: none;
             &:hover {
                border- 1px
             }
          }
       }
    }

    3、显示效果图

    备注:要挂在在服务器上才能看到效果。

  • 相关阅读:
    itextpdf 和 pdfbox 测试用例
    Java base64 编码、解码
    常用字体
    DIY 单片机 入门
    太难了。
    Java 之 native:JNI 本地方法测试实现
    Java 之 String 引用传递
    Java class 文件 方法的指令含义
    Spring学习文章链接
    数据结构_树_图_总结
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5252985.html
Copyright © 2011-2022 走看看