css less

1、css less

//單行注釋
開頭:@charset "utf-8";

變量:
    @color:#000;
    
用法;
    color:@color;
    width:@width;
    
混合(mixin 1、普通)  
    1.在選擇器里引用另一個選擇器
      先定義一個.w{
                    width:1210px;
                    margin:0 auto;
                }
    2.定義一個不帶輸出的mixin:
        .w(){
            加個()就不輸出了
        }
    3.帶有一個參數(shù)的mixin
        .f(@fl){
            float:@fl;
        }
        .left{
            .f(left);
        }
    4.傳一個參數(shù)的,并帶有默認值的mixin
        .f(@fl:left){
            float:@fl;
        }
        h2{
            .f();
        }
        p{
            .f(right);
        }
    5.傳多個參數(shù)的mixin
        .f(@fl;@w;@h){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f(left;200px;300px)
        }
    6.帶有默認值的多個參數(shù)的mixin
        .f(@fl:left;@w:200px;@h:300px){
            float:@fl;
            width:@w;
            height:@h;
        }
        .left{
            .f();
        }
        .right{
            .f(right;300px;400px);
        }

2、less的嵌套規(guī)則

.right{
    h3{
        .f(right;300px;30px);
    }
    li{
        .f();
        a{
            color:@color;
        }
        &:nth-child(2){
        }
    }
}       

3、HTML5新增標(biāo)簽

<header class="header">
</header>

<nav class="nav">
</nav>

<div class="main">
    <aside class="left">
    </aside>
    <div class="center">
    </div>
    <div class="right">
    </div>
</div>  

<time></time>行內(nèi)

<footer class="footer">
</footer>

<address></address>

section==div

圖文混排:
<figure>
    <img src="">
    <figcaption>
        <h3></h3>
        <p></p>
    </figcaption>
</figure>

  兩個標(biāo)題同時出現(xiàn):
<hgroup></hgroup>

文章:
<article></article>

畫布:
<canvas></canvas>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,807評論 1 92
  • 1 安裝加載器 Loader 2 修改webpack.config.js,添加 module 配置項目 3 新增 ...
    ahcj_11閱讀 487評論 0 0
  • 簡介 CSS(層疊樣式表)是一門歷史悠久的標(biāo)記性語言,同 HTML 一道,被廣泛應(yīng)用于萬維網(wǎng)(World Wide...
    老夫的天閱讀 1,994評論 1 29
  • 在iOS11 中automaticallyAdjustsScrollViewInsets屬性被廢棄 可以做一下系統(tǒng)...
    小錘子_閱讀 717評論 0 1
  • “你也睡不著嗎?”,蚊子在我的耳邊說。
    Grav1ty閱讀 211評論 0 0