聖杯布局的要求
– 縱向分為上中下三部分,上中下寬度100%,上下高度固定;中間部分高度自動。
– 中間被拆分為三欄:左右寬度固定,中間自適應;
1.flex布局
2.浮動<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
.container
.header
.footer
.main
.left,
.right
.main .middle
<
/style>
="container"
>
="header"
>頭部<
/div>
="main"
>
="left"
>左側<
/div>
="middle"
>中間<
/div>
="right"
>右側<
/div>
<
/div>
="footer"
>尾部<
/div>
<
/div>
<
/body>
<
/html>
1先定義好header和footer的樣式,使之橫向撐滿。
2在container中的三列設為浮動和相對定位(後面會用到),center要放在最前面,footer清除浮動。
三列的左右兩列分別定寬200px和150px,中間部分center設定100%撐滿
3這樣因為浮動的關係,center會佔據整個container,左右兩塊區域被擠下去了
4接下來設定left的 margin-left: -100%;,讓left回到上一行最左側
5但這會把center給遮住了,所以這時給外層的container設定 padding-left: 200px;padding-right: 150px;,給left和right空出位置
6這時left並沒有在最左側,因為之前已經設定過相對定位,所以通過 left: -200px; 把left拉回最左側
7同樣的,對於right區域,設定 margin-right: -150px; 把right拉回第一行
這時右側空出了150px的空間,所以最後設定 right: -150px;把right區域拉到最右側就行了。
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
*.box
.left
.right
.center
<
/style>
="box"
>
="center"
>
1<
/div>
="left"
>
2<
/div>
="right"
>
3<
/div>
<
/div>
<
/body>
<
/html>
CSS 聖杯布局實現1
什麼是聖杯布局?三欄布局,左右兩欄隨著瀏覽器縮放寬度不變,中間欄自適應 知識點 浮動 定位 padding和margin的區別 我沒有使用大部分教程的方法,但是效果相同。步驟如下 第一步.定義基本結構和樣式 中間欄左邊欄 右邊欄效果圖 因為中間main的寬度佔據了100 所以剩下的兩個div塊級元素...
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似,在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中,為了排開左右兩邊遮擋main元素的區域,是給main又新增了乙個子元素,用子元素來控制main所要顯示內容的寬度與位置,這是乙個不錯的方法,但從結構上來講,我們...
CSS 布局3 聖杯布局
聖杯布局是有 的工程師提出,巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過,使用浮動特性,實現三列布局,但是使用div布局,有乙個問題,那就是內容區,在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路,實現乙個內容區渲染在前的三列布局。1 負邊...