|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級(jí)文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級(jí)文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 本篇文章給大家?guī)淼膬?nèi)容是關(guān)于css實(shí)現(xiàn)雙飛翼布局的四種方法（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。圣杯布局、雙飛翼布局效果圖
從效果圖來看圣杯布局、雙飛翼布局效果是一樣一樣的。 圣杯布局<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: relative;
/* 2、將.left再次拉到最左邊，否則.main的左側(cè)會(huì)有200px的空白 */
left: -200px;
float: left;
width: 200px;
min-height: 300px;
/* 1、將.left拉到最左邊，原來.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
position: relative;
/* 2、將.right再次拉到最右邊，否則.main的右側(cè)會(huì)有200px的空白 */
right: -200px;
float: left;
width: 200px;
/*/1、將.right拉到最右邊，原來.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
</style><div class="header">header</div>
<div class="container clearfix">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>浮動(dòng)實(shí)現(xiàn)雙飛翼布局<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
float: left;
width: 200px;
min-height: 300px;
/* 將.left拉到最左邊，原來.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
/* .left、.right各占了200px，因此需要將其抵消掉 */
padding: 0 200px;
background-color: #c32228;
}
.right{
float: left;
width: 200px;
/* 將.right拉到最右邊，原來.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
</style><div class="header">header</div>
<div class="container clearfix">
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>table-cell實(shí)現(xiàn)雙飛翼布局(IE8也兼容哦~)<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
display: table;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left,
.right,
.main{
/* 外層容器使用table-cell布局，設(shè)置元素為table-cell布局后它們就能在一行顯示了，display: table-cell;設(shè)置寬度無效，
因此他們的寬度由內(nèi)容撐開。 */
display: table-cell;
}
.left-inner{
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
width: 100%;
}
.main-inner{
min-height: 300px;
background-color: #c32228;
}
.right-inner{
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style><div class="header">header</div>
<div class="container clearfix">
<div class="left">
<div class="left-inner">left</div>
</div>
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="right">
<div class="right-inner">right</div>
</div>
</div>
<div class="footer">footer</div>絕對(duì)定位實(shí)現(xiàn)雙飛翼布局使用絕對(duì)定位實(shí)現(xiàn)有個(gè)小問題：父容器的高度只能由.main的高度來決定 <style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
min-height: 300px;
background-color: #c32228;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style><div class="header">header</div>
<div class="container clearfix">
<div class="left">left</div>
<div class="main">mian</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>使用flex實(shí)現(xiàn)雙飛翼布局(有兼容性問題)<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
display: flex;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
flex: 1;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style><div class="header">header</div>
<div class="container clearfix">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>相關(guān)推薦： 什么是雙飛翼布局？分享一個(gè)雙飛翼布局的實(shí)例代碼 CSS布局 圣杯布局 & 雙飛翼布局_html/css_WEB-ITnose 以上就是css實(shí)現(xiàn)雙飛翼布局的四種方法（附代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
