zoukankan      html  css  js  c++  java

  • less

    1.less
       针对的就是CSS，修改样式。

    2.编译方法
        编译的方法有很多种，若使用Hbuilder最方便。
          1.新建一个less文件夹，在此文件夹下新建一个less文件。
          2.在编辑less文件的窗口右击，将会出现编译选项，
          3.点击编译确定存储的位置，HBuilder自动讲less转化成CSS。
          4.然后将css文件引入HTML文件中就可以了。
          5.当对less文件修改了，点击编译覆盖原来的的位置就可以了。

    3.变量
     
    4.混合
     
     
    5.匹配
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<link rel="stylesheet" href="css/6-匹配模式.css" />
    7. 	</head>
    8. 	<body>
    9. 		<div class="box1"></div>
    10. 		<div class="box2"></div>
    11. 		<div class="box3"></div>
    12. 		<div class="box4"></div>
    13. 	</body>
    14. </html>

     
     
    8.嵌套。
      直接在less中可以像HTML那样的关系写样式，编译会自动找父级。
    1. /*
    2.  * &        上一层的选择器
    3.  */
    5. #box{
    6.      500px;
    7.     padding: 20px;
    8.     border: 1px solid #f00;
    9.     &{
    10.         border: 5px solid #f00;
    11.     }
    12.     
    13.     h2{
    14.         font: 20px/20px "微软雅黑";
    15.     }
    16.     
    17.     p{
    18.       color: green;  
    19.     }
    20.     
    21.     ul{
    22.         margin: 0;
    23.         padding: 0;
    24.         list-style: none;
    25.         
    26.         li{
    27.             height: 30px;
    28.             background: #ccc;
    29.             
    30.             a{
    31.               color: #f00;
    32.               &:hover{
    33.                   color: blue;
    34.               }
    35.             }
    36.         }
    37.     }
    38. }
    编译成的CSS
    1. * 
    2. * */
    3. /*
    4.  * &        上一层的选择器
    5.  */
    6. #box {
    7.    500px;
    8.   padding: 20px;
    9.   border: 1px solid #f00;
    10.   border: 5px solid #f00;
    11. }
    12. #box h2 {
    13.   font: 20px/20px "微软雅黑";
    14. }
    15. #box p {
    16.   color: green;
    17. }
    18. #box ul {
    19.   margin: 0;
    20.   padding: 0;
    21.   list-style: none;
    22. }
    23. #box ul li {
    24.   height: 30px;
    25.   background: #ccc;
    26. }
    27. #box ul li a {
    28.   color: #f00;
    29. }
    30. #box ul li a:hover {
    31.   color: blue;
    32. }

    9.运算
    4. @w:300px;
    6. .box1{
    7.      @w;
    8.     height: @w+100;
    9.     height: @w - 100;
    10.     //* 在做减法运算的时候，一定要记着，减号前后要加上一个空格，不然就会报错
    11.     
    12.     border: 1px solid #f00;
    13.     
    14.     position: relative;
    15.     left: @w*2;
    16.     top: @w/3;
    17. }
    20. @ 200px;
    21. @height: 600px;
    23. .box2{
    24.      @width;
    25.     height: @height;
    26.     border: 1px solid #f00;
    27.     
    28.     div{
    29.          @width/2;
    30.         height: @height/2;
    31.         background: green;
    32.         
    33.         margin: (@height - @height/2)/2 auto 0 auto;
    34.         
    35.         filter: ~'alpha(opacity:50)';
    36.         // *避免编译，就把不需要编译的内容前面先加上一个~，把内容放到一对引号中
    37.     }
    38. }
  • 相关阅读:
    react 编写日历组件
    腾讯地图打开地图选取位置 withMap
    react 动态修改 document.title
    axios 中断请求
    react 使用 react-loadable分包
    http Authorization
    @media screen媒体查询
    CSS规范
    布局和WEB性能
    CSS 标签的分类，及显示模式
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6358665.html
Copyright © 2011-2022 走看看