圣杯布局简单结构代码!
圣杯布局
目的:加載文檔時優(yōu)先加載中間區(qū)域,在加載左右兩邊.
特點(diǎn):內(nèi)容區(qū)域可以根據(jù)屏幕大小改變而改變,左右兩邊內(nèi)容保持不變.
實現(xiàn):
1.在最大的div里嵌套三個div,并且中間(center)的div放在最前面.
2.給內(nèi)容(content)左右設(shè)置margin,center寬度設(shè)置100%;
3.給 左邊 div (left)和 右邊 div (right)設(shè)置一個寬度,同時嵌套的三個div需要加上左浮動(float:left).
4.給左邊的div設(shè)置margin-left:-100%;左邊的div就會重疊在中間的div之上,且靠著最左邊.
5.給右邊的div設(shè)置margin-left:(盒子的寬度負(fù)數(shù));,右邊的div會重疊在中間div之上的右邊.
6.給左右連個盒子設(shè)置position:relative;(相對定位),頂部(top)為0;這樣左右的盒子就會貼著頂部顯示,
左邊的盒子設(shè)置一個left:負(fù)的盒子的寬度;右變的盒子設(shè)置一個left:盒子的寬度;(注意這個的寬度不需要負(fù)數(shù)).
我們在這里面用到了三個技術(shù):1.浮動 ? ? ? 2.定位 ? ? ? 3.margin的負(fù)數(shù)
補(bǔ)充:
position:relative;
? 1.設(shè)置了相對定位的元素沒有脫離標(biāo)準(zhǔn)流,并且元素在頁面上占據(jù)了位子.
? 2.相對定位不會改變元素顯示方式.
3.沒有設(shè)置top right bottom left 的相對定位不會改變位子會以標(biāo)準(zhǔn)流顯示.設(shè)置了top?right bottom left會以原來的位子平移.
4.相對定位的元素會覆蓋標(biāo)準(zhǔn)流的元素之上.
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{ /*通配符清除頁面標(biāo)簽樣式,通配符的性能差不建議使用*
padding: 0;
margin: 0;
}
.content{
margin: 0 210px; /*設(shè)置板塊居中*/
height: 100px;
background: pink;
min-width: 800px; /* 允許瀏覽器改變大小但是最小不能小于800px,瀏覽器寬度低于八百時底部會出現(xiàn)滾動條*/
}
.center{
width: 100%; /*這里是100%是以父元素content寬度*/
height: 100px;
background: red;
float: left; /*左浮動*/
}
.left{
width: 200px;
height: 100px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
top: 0px;
left: -210px;
}
.right{
width: 200px;
height: 100px;
background: green;
float: left;
margin-left: -200px;
position: relative;
top: 0px;
left: 210px;
}
</style>
</head>
<body>
<div class="content">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/qq364735538/p/6005634.html
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的圣杯布局简单结构代码!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript焦点图(根据图片下方
- 下一篇： sublime Text3常用快捷键