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