雙飛翼布局

trigkit4 發(fā)布于2019-08-02 10:55 / 949人閱讀

摘要：一雙飛翼布局簡介雙飛翼布局可以比作一只天使，可以把看成是鳥的身體，和則是天使的翅膀。這個布局的實(shí)現(xiàn)思路是，先把最重要的身體部分放好，然后再將翅膀移動到適當(dāng)?shù)牡胤健６a如下雙飛翼布局寫內(nèi)容三這是效果圖眼睛累了吧，注意勞逸結(jié)合呀

一、雙飛翼布局簡介

“雙飛翼布局”可以比作一只天使，可以把center看成是鳥的身體，left和right則是天使的翅膀。這個布局的實(shí)現(xiàn)思路是，先把最重要的身體部分放好，然后再將翅膀移動到適當(dāng)?shù)牡胤健＃p飛翼的特點(diǎn)就是給天使的身體上在加上一個盔甲<一個div>）。它的優(yōu)點(diǎn)是：代碼比圣杯布局簡單一些，而且微調(diào)的時候較簡單。

二、代碼如下：

body{margin:0px;}
.box{
    
    margin:0 auto;
    background:red;
    position:relative;
    height:300px;
    
}
.left{
    height:300px;
    width:200px;
    float:left;
    background:green;
    position:absolute;
    left:0px;
    top:0px;
}
.center{
    margin:0px 200px;    
}
.right{
    height:300px;
    width:200px;
    float:right;
    background:yellow;
    position:absolute;
    right:0px;
    top:0px;
}
.rrr{
    margin:0px 200px 0px 200px;
    width:100%;
    background-color:blue;
    height:300px;
}

三、這是效果圖：

眼睛累了吧，注意勞逸結(jié)合呀[-_-]

GPU云服務(wù)器云服務(wù)器雙飛翼布局雙飛翼雙飛 div布局布局html

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52643.html

相關(guān)文章

圣杯布局和雙飛翼布局

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄要在放在文檔流前面以優(yōu)先渲染。圣杯布局圣杯布局dom結(jié)構(gòu)：圣杯布局 ...

yankeys 2019-08-29 13:54 評論0 收藏0
淺談面試中常考的兩種經(jīng)典布局——圣杯與雙飛翼

摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波，同時加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...

SwordFly 2019-08-30 13:58 評論0 收藏0
淺談面試中常考的兩種經(jīng)典布局——圣杯與雙飛翼

摘要：圣杯和雙飛翼布局介紹最近正好碰到了寫這種布局，一直沒有總結(jié)過正好借這次機(jī)會總結(jié)一波，同時加強(qiáng)一下自己的理解。使用雙飛翼布局就可以避免這個問題。雙飛翼布局則是中間欄不變，將內(nèi)容部分為兩邊騰開位置參考圣杯和雙飛翼布局介紹 showImg(http://www.xluos.com/usr/uploads/2018/02/990972879.png);最近正好碰到了寫這種布局，一直沒有總結(jié)過...

劉厚水 2019-08-01 18:35 評論0 收藏0
聊聊為什么淘寶要提出「雙飛翼」布局

摘要：于是，淘寶軟對針對圣杯的缺點(diǎn)做了優(yōu)化，并提出雙飛翼布局。綜合來看，不管的大小高低如何，雙飛翼布局都能正常顯示，嗯確實(shí)很優(yōu)秀。錘子和釘子綜上所見，雙飛翼布局更勝一籌。 showImg(https://segmentfault.com/img/bVYtjF?w=922&h=561); 前言突然有一天，腦之里不知怎地蹦出一個詞，「雙飛翼」，這是很久以前的淘寶提出的一種三欄布局優(yōu)化方案，然而...

junbaor 2019-08-29 13:47 評論0 收藏0
圣杯布局和雙飛翼布局的理解與思考

摘要：圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。注代碼中，部分首先要放在最前面部分，然后是，以便先行渲染結(jié)構(gòu)首先定義出整個布局的結(jié)構(gòu)，主題部分是由包裹的，三列，其中定義在最前面。圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。按照我的理解，其實(shí)圣杯布局和雙飛翼布局的實(shí)現(xiàn)，目的都是在于兩欄固定...

王偉廷 2019-08-02 16:16 評論0 收藏0
圣杯布局和雙飛翼布局的理解與思考

摘要：圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。注代碼中，部分首先要放在最前面部分，然后是，以便先行渲染結(jié)構(gòu)首先定義出整個布局的結(jié)構(gòu)，主題部分是由包裹的，三列，其中定義在最前面。圣杯布局和雙飛翼布局的理解與思考圣杯布局和雙飛翼布局都是前端工程師需要日常掌握的重要布局方式。按照我的理解，其實(shí)圣杯布局和雙飛翼布局的實(shí)現(xiàn)，目的都是在于兩欄固定...

qpwoeiru96 2019-08-30 10:49 評論0 收藏0