2020-2-18 seo達(dá)人
一、你能學(xué)到什么?
①如何使用css變量 ②實(shí)現(xiàn)圣杯布局和雙飛翼的簡(jiǎn)單思路 ③了解浮動(dòng)和margin的特性
css變量設(shè)置(兩個(gè)布局都有的部分)
:root{
/ 左邊欄寬度 /
--lw:300px;
/負(fù)左邊欄寬度/
--lwf:-300px;
/ 右邊欄寬度 /
--rw:400px;
/負(fù)左邊欄寬度/
--rwf:-400px;
/ 高度 /
--height:300px;
}
二、圣杯布局的html和css代碼
html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
css 實(shí)現(xiàn)對(duì)應(yīng)的四個(gè)class
.holyGrail {
height: var(--height);
/ 留出左右兩欄的布局 為了字體不被覆蓋/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、雙飛翼布局的html和css代碼
html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
css 實(shí)現(xiàn)對(duì)應(yīng)的五個(gè)class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、學(xué)會(huì)兩個(gè)布局的注意點(diǎn)
圣杯布局
在最外邊的類(lèi)(holyGrail)左右要留出左欄和右欄的寬度(使用padding-left,padding-right)
中間的div.hg_main放在最上面,優(yōu)先渲染,中間div自適應(yīng),width為100%
左中右欄的div都設(shè)置浮動(dòng),左欄通過(guò)margin-left:-100%移動(dòng)到和中間的div同一起點(diǎn),然后通過(guò)position: relative;
left: -(左欄的寬度);會(huì)移動(dòng)到最外層div的左內(nèi)邊距的區(qū)域(中間div的左邊)
右欄可以通過(guò)margin-right:-(右欄的寬度);移動(dòng)到最外層div的右內(nèi)邊距的區(qū)域(中間div的右邊)
雙飛翼布局
在中欄的div再加一個(gè)div,設(shè)置margin-left:左欄的寬度,這樣可以省略左欄的div使用postion和left的屬性移動(dòng)
最外層的div可以不用預(yù)留左欄的位置了
五、兩個(gè)布局的對(duì)比的優(yōu)缺點(diǎn)
布局 優(yōu)點(diǎn) 缺點(diǎn)
圣杯 無(wú)多余dom 當(dāng)中間的寬度小于左右的寬度時(shí),結(jié)構(gòu)混亂
雙飛翼 可以支持各種寬度,通用性強(qiáng)較強(qiáng) 需要多加一層dom
代碼下載地址
記得一定要自己去實(shí)現(xiàn)一下
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com