成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 圣杯布局 / 雙飛翼布局的實(shí)現(xiàn)

Aldous / 3152人閱讀

摘要：先讓它們浮動(dòng)，并給和一個(gè)固定寬度，寬度，清除浮動(dòng)流，結(jié)果變成上面這樣。

工作的越久，有些基礎(chǔ)知識(shí)我們可能就逐漸淡忘了，今天我們來(lái)回顧一下css的圣杯布局和雙飛翼布局，

這兩個(gè)名詞你可能不熟， 那三欄布局你肯定就非常熟悉了，

就是兩邊定寬， 中間自適應(yīng) 的 布局?

1 ， 圣杯布局??



三欄布局



    
center

    
left

    
right




footer

首先HTML結(jié)構(gòu)是這樣的，因?yàn)橐ＷC中間的結(jié)構(gòu)先渲染， 所以 center 要放在 最前面 。

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 700px;
}
header , footer{
    background-color: antiquewhite;
    text-align: center;
}
footer{
    clear: both;
}
.container{
    height: 200px;
}
.container .column{
    float: left;
    position: relative;
    height: 100%;
}
.center{
    width: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
}
.right{
    width: 200px;
    background-color: chartreuse;
}

先讓它們浮動(dòng)， 并給left 和 right 一個(gè) 固定 寬度， center寬度100%，

footer清除浮動(dòng)流， 結(jié)果變成上面這樣? 。

然后我們要把 left? 和 right 放上去? ?

先把left 放上去? ：

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}

加上 一個(gè) margin-left 為? 負(fù)的自己的寬度? ， 變成了這樣：

?

?我們可以看到 center的文字被 left? 蓋住了? ， 所以給container加一個(gè)padding?

.container{
    height: 200px;
    padding: 0 200px;
}

變成了這樣：

由于加了padding， 內(nèi)容區(qū)域變小， left 也跟過(guò)來(lái)了， 所以要給left設(shè)置一個(gè)left:

.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
    left: -200px;
}

這樣left 就到最左邊了， center文字也出來(lái)了， 同理right

.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -100%;
    right: -100%;
}

最終效果：

?

2? ?雙飛翼布局（始于淘寶的UED）

和圣杯布局差不多， 不同之處在于它們處理中間部分被兩邊蓋住的方法不同

雙飛翼布局給center加了一個(gè)inner center ，而不是在最外層加container

HTML：

雙飛翼布局




    

        center
    




left


right



footer

然后 給 inner-center? 加margin? (只列出關(guān)鍵代碼) :

.center .inner-center{
    margin-left: 200px;
    margin-right: 200px;
    height: 100%;
    background-color: tomato;
}
.left{
    width: 200px;
    background-color: aqua;
    margin-left: -100%;
}
.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -200px;
}

最終效果和圣杯布局一樣。。。。。。

?

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/984.html

相關(guān)文章

  • CSS布局--圣杯布局和雙飛翼布局以及使用Flex實(shí)現(xiàn)圣杯布局

    摘要：圣杯布局雙飛翼布局所謂圣杯布局和雙飛翼布局其實(shí)解決的問(wèn)題是相同的，都是解決左右兩欄固定寬度，中間部分自適應(yīng)，其中某部分內(nèi)容比其他內(nèi)容高的時(shí)候，保證三者元素等高。雙飛翼用在外層多加了一個(gè)然后改用。 前言 我曾一度覺(jué)得總寫css的前端很low，有了這種思想以后我便遠(yuǎn)離網(wǎng)頁(yè)布局，H5的工作更不想接，沉迷于頁(yè)面邏輯和封裝組件。直到最近我面試，面試官說(shuō)我css3理解的不熟，我起初很不屑，但后來(lái)靜...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過(guò)于圣杯布局和雙飛翼布局。而雙飛翼布局方法無(wú)需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過(guò)來(lái)實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見(jiàn)的一種布局模式，顧名思義，就是將網(wǎng)頁(yè)內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

    摘要：經(jīng)典方法三欄布局的方法有很多種，其中最經(jīng)典的方法莫過(guò)于圣杯布局和雙飛翼布局。而雙飛翼布局方法無(wú)需相對(duì)位置屬性，而是采用為中欄內(nèi)容創(chuàng)建的方式，通過(guò)來(lái)實(shí)現(xiàn)布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細(xì)節(jié)和異同。 三欄是CSS布局中常見(jiàn)的一種布局模式，顧名思義，就是將網(wǎng)頁(yè)內(nèi)容以三列的形式呈現(xiàn)。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

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

  • CSS 圣杯布局 / 雙飛翼布局的實(shí)現(xiàn)

    摘要：先讓它們浮動(dòng)，并給和一個(gè)固定寬度，寬度，清除浮動(dòng)流，結(jié)果變成上面這樣。工作的越久，有些基礎(chǔ)知識(shí)我們可能就逐漸淡忘了，今天我們來(lái)回顧一下css的圣杯布局和雙飛翼布局， 這兩個(gè)名詞你可能不熟， 那三欄布局你肯定就非常熟悉了， 就是兩邊定寬， 中間自適應(yīng) 的 布局? 1 ， 圣杯布局? !--三欄布局-- header 三欄布局 /header div div cent...

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

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

0條評(píng)論

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