zoukankan      html  css  js  c++  java
  • 初识less

    HTML文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01-初识less.html</title>
        <!--直接在html文件中书写less代码-->
        <!--
        <style type="text/less">
            *{
                margin: 0;
                padding: 0;
            }
    
            .center{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
    
            .father{
                 400px;
                height: 400px;
                background: brown;
                .center;
                .son{
                     200px;
                    height: 200px;
                    background: skyblue;
                    .center;
                }
            }
    
        </style>
        -->
        <!--从外部引入less文件-->
        <link rel="stylesheet/less" href="css/index.less">
        <script src="js/less.js"></script>
    </head>
    <body>
    <div class="father">
        <div class="son"></div>
    </div>
    </body>
    </html>
    

    less代码

    *{
      margin: 0;
      padding: 0;
    }
    
    .center{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    
    .father{
       400px;
      height: 400px;
      background: orange;
      .center;
      .son{
         200px;
        height: 200px;
        background: springgreen;
        .center;
      }
    }
    

  • 相关阅读:
    get通配符
    常用正则表达式(合)
    2.A star
    1.序
    机器人运动规划04《规划算法》
    机器人运动规划03什么是运动规划
    6.2 性能优化
    6.1 内存机制及使用优化
    5.9 热修复技术
    5.8 反射机制
  • 原文地址:https://www.cnblogs.com/TomHe789/p/12885219.html
Copyright © 2011-2022 走看看