国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

GraphQuery / 2325人閱讀

摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類，右側(cè)是飯的列表等等。

最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類，右側(cè)是飯的列表等等。反正挺實(shí)用，值得收藏！

先看HTML代碼



    
        
        
        
        左側(cè)固定，右側(cè)自適應(yīng)
    
        
        
左側(cè)固定，右側(cè)自適應(yīng)布局

        

            

                左側(cè)定寬左側(cè)定寬左側(cè)定寬左側(cè)定寬左側(cè)定寬左側(cè)定寬
            

            

                

                    右側(cè)自適應(yīng),這是會(huì)自動(dòng)換行的換行的換行的發(fā)動(dòng)發(fā)動(dòng)發(fā)扥扥這是會(huì)自動(dòng)換行的換行的換行的發(fā)動(dòng)發(fā)動(dòng)發(fā)扥扥這是會(huì)自動(dòng)換行的換行的換行的發(fā)動(dòng)發(fā)動(dòng)發(fā)扥扥這是會(huì)自動(dòng)換行的換行的換行的發(fā)動(dòng)發(fā)動(dòng)發(fā)扥扥

css代碼

*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
/* 兩列右側(cè)自適應(yīng)布局 */
.left-fixed_right-auto{
    width: 100%;
    height: 200px;
    clear: both;
    display: inline-block;
    margin-top: 20px;
}
.left{
    position:relative;
    float:left;
    width:200px;/* 數(shù)值核心1 */
    height: 100%;
    margin-right:-200px;/* 數(shù)值核心2 */
    background: red;
}
.right{
    float:right;
    width:100%;
    height: 100%;
    background: pink;
}
.right-content{
    margin-left:200px;/* 數(shù)值核心3 */
    height: 100%;
    background: blue;
}

點(diǎn)擊查看效果

你可以嘗試改變你的瀏覽器窗口，會(huì)發(fā)現(xiàn)，不管怎么改變大小，始終都是這種布局。有了這個(gè)規(guī)律，便可以實(shí)現(xiàn)一種動(dòng)態(tài)效果，比如有一種場(chǎng)景：
左側(cè)里面放一個(gè)按鈕，通過點(diǎn)擊這個(gè)按鈕，來切換左側(cè)的寬度大小。當(dāng)左側(cè)變窄時(shí)，右側(cè)自動(dòng)變寬；當(dāng)左側(cè)變寬時(shí)，右側(cè)自動(dòng)變窄，下面來實(shí)現(xiàn)一下：
js代碼，在這之前，需要注釋css中的以下三行代碼

.left{
    position:relative;
    float:left;
    /* width:200px; */
    height: 100%;
    /* margin-right:-200px; */
    background: red;
}
.right-content{
    /* margin-left:200px; */
    height: 100%;
    background: blue;
}

其實(shí)這三行我已在注釋中標(biāo)明了，分別是數(shù)值核心1，2，3.
javascript(我沒有寫window.onload，請(qǐng)務(wù)必放到dom的下面執(zhí)行)

var doc=document,

    /**
     * [flag 當(dāng)前展示寬度狀態(tài)，true:使用最大寬度;false:使用最小寬度。默認(rèn)是使用最大寬度]
     * @type {Boolean}
     */
    flag=true,

    /**
     * [maxWidth，minWidth 分別是左側(cè)的最大和最小寬度]
     * @type {String}
     */
    maxWidth="200px",
    minWidth="50px",

    //左側(cè)按鈕容器
    btnContainer=doc.querySelector(".toggle-btn"),

    //左側(cè)容器和右側(cè)容器，實(shí)際上就只需要操作這兩個(gè)元素
    leftContainer=doc.querySelector(".left"),
    rightContent=doc.querySelector(".right-content"),

    /**
     * 切換寬度大小
     * @param {String}   width 左側(cè)需要顯示的寬度(帶px)
     */
    setToggleLayout=function(width){
        leftContainer.style.width=width;
        leftContainer.style.marginRight="-"+width;

        rightContent.style.marginLeft=width;
    };

//初始化先調(diào)用一下，根據(jù)前面定義的規(guī)則，默認(rèn)顯示最大寬度
setToggleLayout(flag ? maxWidth : minWidth);

//點(diǎn)擊按鈕切換大小
btnContainer.onclick=function(){
    flag=!flag;
    setToggleLayout(flag ? maxWidth : minWidth);
    btnContainer.innerHTML=flag ? "收起" : "展開";
};

點(diǎn)擊查看效果
查看完整代碼
其實(shí)這只是簡(jiǎn)單的封裝，你可以使用jQuery加入動(dòng)畫，還可以寫成jQuery插件等。
賽冷思原創(chuàng)官方博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/50070.html

相關(guān)文章

  • css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

    摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類，右側(cè)是飯的列表等等。 最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，...

    Carbs 評(píng)論0 收藏0

  • css經(jīng)典布局之左側(cè)固定大小右側(cè)自動(dòng)適應(yīng)

    摘要：最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，左側(cè)是飯的分類，右側(cè)是飯的列表等等。 最近學(xué)習(xí)了一種經(jīng)典布局，固定左側(cè)或右側(cè)的寬度，另一側(cè)自適應(yīng)寬度，此種布局挺常用，尤其是像后臺(tái)，大部分都是采用這種結(jié)構(gòu)，還比如像訂餐類的APP，進(jìn)入商家的時(shí)候，會(huì)出現(xiàn)一堆飯的列表，...

    booster 評(píng)論0 收藏0

  • 2種方法實(shí)現(xiàn)經(jīng)典的左側(cè)固定寬度200px，右側(cè)自適應(yīng)寬度的布局

    摘要：今天去面試前端人員，隨即出了一個(gè)經(jīng)典的布局問題，即如標(biāo)題所示。可是結(jié)果令我很驚訝，超過一半的人都沒答對(duì)，亦或是只答對(duì)一半在此記錄下用兩種方法，第一種普通的方法，第二種是利用布局。 ??????今天去面試前端人員，隨即出了一個(gè)經(jīng)典的布局問題，即如標(biāo)題所示。可是結(jié)果令我很驚訝，超過一半的人都沒答對(duì)，亦或是只答對(duì)一半！在此記錄下用兩種方法，第一種普通的方法，第二種是利用flex布局。 首先...

    raise_yang 評(píng)論0 收藏0

  • CSS布局十八般武藝都在這里了

    摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到。可以通過設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...

    includecmath 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<