一文詳解CSS常見的五大布局

文概要

本文將介紹如下幾種常見的布局：

一、單列布局

常見的單列布局有兩種：

header,content 和 footer 等寬的單列布局
header 與 footer 等寬,content 略窄的單列布局

1.如何實現(xiàn)

對于第一種，先通過對 header,content,footer 統(tǒng)一設(shè)置 width：1000px;或者 max-width：1000px(這兩者的區(qū)別是當(dāng)屏幕小于 1000px 時，前者會出現(xiàn)滾動條，后者則不會，顯示出實際寬度);然后設(shè)置 margin:auto 實現(xiàn)居中即可得到。

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

對于第二種，header、footer 的內(nèi)容寬度不設(shè)置，塊級元素充滿整個屏幕，但 header、content 和 footer 的內(nèi)容區(qū)設(shè)置同一個 width，并通過 margin:auto 實現(xiàn)居中。

<div class="header"> 
 <div class="nav"></div> 
</div> 
<div class="content"></div> 
<div class="footer"></div> 
.header{ 
 margin:0 auto; 
 max-width: 960px; 
 height:100px; 
 background-color: blue; 
} 
.nav{ 
 margin: 0 auto; 
 max-width: 800px; 
 background-color: darkgray; 
 height: 50px; 
} 
.content{ 
 margin: 0 auto; 
 max-width: 800px; 
 height: 400px; 
 background-color: aquamarine; 
} 
.footer{ 
 margin: 0 auto; 
 max-width: 960px; 
 height: 100px; 
 background-color: aqua; 
}

二、兩列自適應(yīng)布局

兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式

1.float+overflow:hidden

如果是普通的兩列布局， 浮動+普通元素的 margin 便可以實現(xiàn)，但如果是自適應(yīng)的兩列布局，利用 float+overflow:hidden 便可以實現(xiàn)，這種辦法主要通過 overflow 觸發(fā) BFC,而 BFC 不會重疊浮動元素。由于設(shè)置 overflow:hidden 并不會觸發(fā) IE6-瀏覽器的 haslayout 屬性，所以需要設(shè)置 zoom:1 來兼容 IE6-瀏覽器。具體代碼如下：

<div class="parent" style="background-color: lightgrey;"> 
 <div class="left" style="background-color: lightblue;"> 
 <p>left</p> 
 </div> 
 <div class="right" style="background-color: lightgreen;"> 
 <p>right</p> 
 <p>right</p> 
 </div> 
</div> 
.parent { 
overflow: hidden; 
zoom: 1; 
} 
.left { 
float: left; 
margin-right: 20px; 
} 
.right { 
overflow: hidden; 
zoom: 1; 
}

注意點:如果側(cè)邊欄在右邊時，注意渲染順序。即在 HTML 中，先寫側(cè)邊欄后寫主內(nèi)容

2.Flexbox 布局

Flexbox 布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。

//html部分同上 
.parent { 
display:flex; 
} 
.right { 
margin-left:20px; 
flex:1; 
}

3.Grid 布局

Grid 布局，是一個基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計。

//html部分同上 
.parent { 
display:grid; 
grid-template-columns:auto 1fr; 
grid-gap:20px 
}

三、三欄布局

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度 ，實現(xiàn)三欄布局有多種方式：

1.浮動布局

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>Layout</title> 
 <style media="screen"> 
 html * { 
 padding: 0; 
 margin: 0; 
 } 
 .layout article div { 
 min-height: 150px; 
 } 
 </style> 
</head> 
<body> 
 <!--浮動布局 --> 
 <section class="layout float"> 
 <style media="screen"> 
 .layout.float . left { 
 float: left; 
 width: 300px; 
 background: red; 
 } 
 .layout.float .center { 
 background: yellow; 
 } 
 .layout.float . right { 
 float: right; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-right-center"> 
 <div class="left"></div> 
 <div class="right"></div> // 右欄部分要寫在中間內(nèi)容之前 
 <div class="center"> 
 <h2>浮動解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 </article> 
 </section> 
</body> 
</html>

這種布局方式，dom 結(jié)構(gòu)必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。浮動布局的優(yōu)點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。

2.絕對定位布局

<!--絕對布局 --> 
 <section class="layout absolute"> 
 <style> 
 .layout.absolute . left-center- right>div{ 
 position: absolute;//三塊都是絕對定位 
 } 
 .layout.absolute . left { 
 left:0; 
 width: 300px; 
 background: red; 
 } 
 .layout.absolute .center { 
 right: 300px; 
 left: 300px;//離左右各三百 
 background: yellow; 
 } 
 .layout.absolute . right { 
 right: 0; 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>絕對定位解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

絕對定位布局優(yōu)點就是快捷，設(shè)置很方便，而且也不容易出問題。缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導(dǎo)致了這種方法的有效性和可使用性是比較差的。

3.flexbox 布局

<!--flexbox布局--> 
 <section class="layout flexbox"> 
 <style> 
 .layout.flexbox .left-center- right{ 
 display: flex; 
 } 
 .layout.flexbox .left { 
 width: 300px; 
 background: red; 
 } 
 .layout.flexbox .center { 
 background: yellow; 
 flex: 1; 
 } 
 .layout.flexbox .right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>flexbox解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

flexbox 布局是 css3 里新出的一個，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個。目前移動端的布局也都是用 flexbox。 flexbox 的缺點就是 IE10 開始支持，但是 IE10 的是-ms 形式的。

4.表格布局

<!--表格布局--> 
 <section class="layout table"> 
 <style> 
 .layout.table . left-center- right { 
 display: table; 
 height: 150px; 
 width: 100%; 
 } 
 .layout.table . left-center- right>div { 
 display: table-cell; 
 } 
 .layout.table . left { 
 width: 300px; 
 background: red; 
 } 
 .layout.table .center { 
 background: yellow; 
 } 
 .layout.table . right { 
 width: 300px; 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>表格布局解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
 </section>

表格布局的兼容性很好，在 flex 布局不兼容的時候，可以嘗試表格布局。當(dāng)內(nèi)容溢出時會自動撐開父元素。

表格布局也是有缺陷:① 無法設(shè)置欄邊距；② 對 seo 不友好；③ 當(dāng)其中一個單元格高度超出的時候，兩側(cè)的單元格也是會跟著一起變高的，然而有時候這并不是我們想要的效果。

5.網(wǎng)格布局

<!--網(wǎng)格布局--> 
<section class="layout grid"> 
 <style> 
 .layout.grid .left-center- right { 
 display: grid; 
 width: 100%; 
 grid-template-columns: 300px auto 300px; 
 grid-template-rows: 150px;//行高 
 } 
 .layout.grid .left { 
 background: red; 
 } 
 .layout.grid .center { 
 background: yellow; 
 } 
 .layout.grid .right { 
 background: blue; 
 } 
 </style> 
 <h1>三欄布局</h1> 
 <article class="left-center-right"> 
 <div class="left"></div> 
 <div class="center"> 
 <h2>網(wǎng)格布局解決方案</h2> 
 1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案； 
 </div> 
 <div class="right"></div> 
 </article> 
</section>

CSS Grid 是創(chuàng)建網(wǎng)格布局最強(qiáng)大和最簡單的工具。就像表格一樣，網(wǎng)格布局可以讓 Web 設(shè)計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

6.圣杯布局

① 特點

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是 dom 結(jié)構(gòu)必須是先寫中間列部分，這樣實現(xiàn)中間列可以優(yōu)先加載。

.container { 
 padding-left: 220px;//為左右欄騰出空間 
 padding-right: 220px; 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
 position: relative; 
 left: -220px; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
 position: relative; 
 right: -220px; 
} 
<article class="container"> 
 <div class="center"> 
 <h2>圣杯布局</h2> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實現(xiàn)步驟

三個部分都設(shè)定為左浮動， 否則左右兩邊內(nèi)容上不去，就不可能與中間列同一行 。然后設(shè)置 center 的寬度為 100%( 實現(xiàn)中間列內(nèi)容自適應(yīng) )，此時，left 和 right 部分會跳到下一行

通過設(shè)置 margin-left 為負(fù)值讓 left 和 right 部分回到與 center 部分同一行

通過設(shè)置父容器的 padding-left 和 padding-right，讓左右兩邊留出間隙。

通過設(shè)置相對定位，讓 left 和 right 部分移動到兩邊。

③ 缺點

center 部分的最小寬度不能小于 left 部分的寬度，否則會 left 部分掉到下一行
如果其中一列內(nèi)容高度拉長(如下圖)，其他兩列的背景并不會自動填充。(借助等高布局正padding+負(fù)margin可解決，下文會介紹)

7.雙飛翼布局

① 特點

同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會出問題。

.container { 
 min-width: 600px;//確保中間內(nèi)容可以顯示出來，兩倍 left寬+ right寬 
} 
.left { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: red; 
 margin-left: -100%; 
} 
.center { 
 float: left; 
 width: 100%; 
 height: 500px; 
 background: yellow; 
} 
.center .inner { 
 margin: 0 200px; //新增部分 
} 
.right { 
 float: left; 
 width: 200px; 
 height: 400px; 
 background: blue; 
 margin-left: -200px; 
} 
<article class="container"> 
 <div class="center"> 
 <div class="inner">雙飛翼布局</div> 
 </div> 
 <div class="left"></div> 
 <div class="right"></div> 
</article>

② 實現(xiàn)步驟(前兩步與圣杯布局一樣)

三個部分都設(shè)定為左浮動，然后設(shè)置 center 的寬度為 100%，此時，left 和 right 部分會跳到下一行；
通過設(shè)置 margin-left 為負(fù)值讓 left 和 right 部分回到與 center 部分同一行；
center 部分增加一個內(nèi)層 div，并設(shè) margin: 0 200px；

③ 缺點

多加一層 dom 樹節(jié)點，增加渲染樹生成的計算量 。

④ 圣杯布局和雙飛翼布局實現(xiàn)方式對比:

兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。
兩種布局方式在實現(xiàn)上也有相同之處，都是讓三列浮動，然后通過負(fù)外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置： 圣杯布局是利用父容器的左、右內(nèi)邊距+兩個從列相對定位 ; 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進(jìn)行布局調(diào)整

四、等高列布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高。

1.利用背景圖片

這種方法是我們實現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進(jìn)行Y軸的鋪放，從而實現(xiàn)一種等高列的假象。實現(xiàn)方法簡單，兼容性強(qiáng)，不需要太多的css樣式就可以輕松實現(xiàn),但此方法不適合流體布局等高列的布局。

在制作樣式之前需要一張類似下面的背景圖：

<div class=”container clearfix”> 
 <div class=”left”></div> 
 <div class=”content”></div> 
 <div class=”right”></div> 
</div> 
.container { 
background: url("column.png") repeat-y; 
width: 960px; 
margin: 0 auto; 
} 
.left { 
float: left; 
width: 220px; 
} 
.content { 
float: left; 
width: 480px; 
} 
.right { 
float: left; 
width: 220px; 
}

2.利用正padding+負(fù)margin

我們通過等布局便可解決圣杯布局的第二點缺點，因為背景是在 padding 區(qū)域顯示的，設(shè)置一個大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負(fù)的 margin-bottom，并在所有列外面加上一個容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實現(xiàn)多列等高布局，并且也能實現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器。新增代碼如下：

.center, 
 .left, 
 .right { 
 padding-bottom: 10000px; 
 margin-bottom: -10000px; 
 } 
 .container { 
 padding-left: 220px; 
 padding-right: 220px; 
 overflow: hidden;//把溢出背景切掉 
 }

3.模仿表格布局

這是一種非常簡單，易于實現(xiàn)的方法。不過兼容性不好，在ie6-7無法正常運行。

 <div class="container table"> 
 <div class="containerInner tableRow"> 
 <div class="column tableCell cell1"> 
 <div class="left aside"> 
 .... 
 </div> 
 </div> 
 <div class="column tableCell cell2"> 
 <div class="content section"> 
 ... 
 </div> 
 </div> 
 <div class="column tableCell cell3"> 
 <div class="right aside"> 
 ... 
 </div> 
 </div> 
 </div> 
 </div> 
.table { 
width: auto; 
min-width: 1000px; 
margin: 0 auto; 
padding: 0; 
display: table; 
} 
.tableRow { 
display: table-row; 
} 
.tableCell { 
display: table-cell; 
width: 33%; 
} 
.cell1 { 
background: #f00; 
height: 800px; 
} 
.cell2 { 
background: #0f0; 
} 
.cell3 { 
background: #00f; 
}

4.使用邊框和定位

這種方法是使用邊框和絕對定位來實現(xiàn)一個假的高度相等列的效果。結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。假設(shè)你需要實現(xiàn)一個兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。

#wrapper { 
width: 960px; 
margin: 0 auto; 
} 
#mainContent { 
border-right: 220px solid #dfdfdf; 
position: absolute; 
width: 740px; 
height: 800px; 
background: green; 
} 
#sidebar { 
background: #dfdfdf; 
margin-left: 740px; 
position: absolute; 
height: 800px; 
width: 220px; 
} 
<div id="wrapper"> 
 <div id="mainContent">...</div> 
 <div id="sidebar">...</div> 
</div>

五、粘連布局

1.特點

有一塊內(nèi)容 <main> ，當(dāng) <main> 的高康足夠長的時候，緊跟在 <main> 后面的元素 <footer> 會跟在 <main> 元素的后面。
當(dāng) <main> 元素比較短的時候(比如小于屏幕的高度),我們期望這個 <footer> 元素能夠“粘連”在屏幕的底部

具體代碼如下：

main

footer

* { 
 margin: 0; 
 padding: 0; 
 } 
 html, 
 body { 
 height: 100%;//高度一層層繼承下來 
 } 
 #wrap { 
 min-height: 100%; 
 background: pink; 
 text-align: center; 
 overflow: hidden; 
 } 
 #wrap .main { 
 padding-bottom: 50px; 
 } 
 #footer { 
 height: 50px; 
 line-height: 50px; 
 background: deeppink; 
 text-align: center; 
 margin-top: -50px; 
 }

2.實現(xiàn)步驟

(1)footer 必須是一個獨立的結(jié)構(gòu)，與 wrap 沒有任何嵌套關(guān)系

(2)wrap 區(qū)域的高度通過設(shè)置 min-height，變?yōu)橐暱诟叨?/strong>

(3)footer 要使用 margin 為負(fù)來確定自己的位置

(4)在 main 區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負(fù) margin 導(dǎo)致 footer 覆蓋任何實際內(nèi)容。

參考文章

雙飛翼布局介紹-始于淘寶 UED
CSS 三欄布局的四種方法
CSS 兩列布局---左側(cè)固定，右側(cè)自適應(yīng)
兩列自適應(yīng)布局的四種思路
css 常見布局之九：三欄布局的常見實現(xiàn)
【布局】聊聊為什么淘寶要提出「雙飛翼」布局
CSS 的單列布局與二&三列布局
八種創(chuàng)建等高列布局

頁布局對改善網(wǎng)站的外觀非常重要。

請慎重設(shè)計您的網(wǎng)頁布局。

實例

使用 <div> 元素的網(wǎng)頁布局

[demo]

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

div#container{width:500px}

div#header {background-color:#99bbbb;}

div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}

div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}

div#footer {background-color:#99bbbb;clear:both;text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0;font-size:18px;}

ul {margin:0;}

li {list-style:none;}

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>Main Title of Web Page</h1>

</div>

<div id="menu">

<h2>Menu</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>

</html>

[/demo]

如何使用 <div> 元素添加布局。

使用 <table> 元素的網(wǎng)頁布局

[demo]

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#99bbbb;">

<h1>Main Title of Web Page</h1>

</td>

</tr>

<tr valign="top">

<td style="background-color:#ffff99;width:100px;text-align:top;">

<b>Menu</b><br />

HTML<br />

CSS<br />

JavaScript

</td>

<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">

Content goes here</td>

</tr>

<tr>

<td colspan="2" style="background-color:#99bbbb;text-align:center;">

Copyright W3School.com.cn</td>

</tr>

</table>

</body>

</html>

[/demo]

如何使用 <table> 元素添加布局。

網(wǎng)站布局

大多數(shù)網(wǎng)站會把內(nèi)容安排到多個列中（就像雜志或報紙那樣）。

可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進(jìn)行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

提示：即使可以使用 HTML 表格來創(chuàng)建漂亮的布局，但設(shè)計表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！

HTML 布局 - 使用 <div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創(chuàng)建多列布局：

實例

[demo]

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

div#container{width:500px}

div#header {background-color:#99bbbb;}

div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}

div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}

div#footer {background-color:#99bbbb; clear:both; text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>Main Title of Web Page</h1>

</div>

<div id="menu">

<h2>Menu</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>

</html>

[/demo]

上面的 HTML 代碼會產(chǎn)生如下結(jié)果：

使用 div 和 CSS 進(jìn)行布局

HTML 布局 - 使用表格

使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡單的方式。

可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進(jìn)行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

提示：即使可以使用 HTML 表格來創(chuàng)建漂亮的布局，但設(shè)計表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

[demo]

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#99bbbb;">

<h1>Main Title of Web Page</h1>

</td>

</tr>

<tr valign="top">

<td style="background-color:#ffff99;width:100px;text-align:top;">

<b>Menu</b><br />

HTML<br />

CSS<br />

JavaScript

</td>

<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">

Content goes here</td>

</tr>

<tr>

<td colspan="2" style="background-color:#99bbbb;text-align:center;">

Copyright W3School.com.cn</td>

</tr>

</table>

</body>

</html>

[/demo]

上面的 HTML 代碼會產(chǎn)生以下結(jié)果：

使用表格進(jìn)行布局

HTML 布局 - 有用的提示

提示：使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護(hù)。通過編輯單一的文件，就可以改變所有頁面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識，請訪問我們的 CSS 教程。

提示：由于創(chuàng)建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網(wǎng)站模板（您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局，并優(yōu)化它們）。

HTML 布局標(biāo)簽

標(biāo)簽描述

<div> 定義文檔中的分區(qū)或節(jié)（division/section）。

<span> 定義 span，用來組合文檔中的行內(nèi)元素。

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

實例

垂直框架

[demo]

<html>

<frameset cols="25%,50%,25%">

<frame src="/example/html/frame_a.html">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

</frameset>

</html>

[/demo]

本例演示：如何使用三份不同的文檔制作一個垂直框架。

水平框架

[demo]

<html>

<frameset rows="25%,50%,25%">

<frame src="/example/html/frame_a.html">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

</frameset>

</html>

[/demo]

本例演示：如何使用三份不同的文檔制作一個水平框架。

框架

通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。

使用框架的壞處：

開發(fā)人員必須同時跟蹤更多的HTML文檔

很難打印整張頁面

框架結(jié)構(gòu)標(biāo)簽（<frameset>）

框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架

每個 frameset 定義了一系列行或列

rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積

編者注：frameset 標(biāo)簽也被某些文章和書籍譯為框架集。

框架標(biāo)簽（Frame）

Frame 標(biāo)簽定義了放置在每個框架中的 HTML 文檔。

在下面的這個例子中，我們設(shè)置了一個兩列的框架集。第一列被設(shè)置為占據(jù)瀏覽器窗口的 25%。第二列被設(shè)置為占據(jù)瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：

<frameset cols="25%,75%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

基本的注意事項 - 有用的提示：

假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發(fā)生，可以在 <frame> 標(biāo)簽中加入：noresize="noresize"。

為不支持框架的瀏覽器添加 <noframes> 標(biāo)簽。

重要提示：不能將 <body></body> 標(biāo)簽與 <frameset></frameset> 標(biāo)簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標(biāo)簽，就必須將這段文字嵌套于 <body></body> 標(biāo)簽內(nèi)。（在下面的第一個實例中，可以查看它是如何實現(xiàn)的。）

更多實例

如何使用 <noframes> 標(biāo)簽

[demo]

<html>

<frameset cols="25%,50%,25%">

<frame src="/example/html/frame_a.html">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

<noframes>

<body>您的瀏覽器無法處理框架！</body>

</noframes>

</frameset>

</html>

[/demo]

本例演示：如何使用 <noframes> 標(biāo)簽。

混合框架結(jié)構(gòu)

[demo]

<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

</frameset>

</html>

[/demo]

本例演示如何制作含有三份文檔的框架結(jié)構(gòu)，同時將他們混合置于行和列之中。

含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

[demo]

<html>

<frameset cols="50%,*,25%">

<frame src="/example/html/frame_a.html" noresize="noresize" />

<frame src="/example/html/frame_b.html" />

<frame src="/example/html/frame_c.html" />

</frameset>

</html>

[/demo]

本例演示 noresize 屬性。在本例中，框架是不可調(diào)整尺寸的。在框架間的邊框上拖動鼠標(biāo)，你會發(fā)現(xiàn)邊框是無法移動的。

導(dǎo)航框架

[demo]

<html>

<frameset cols="120,*">

<frame src="/example/html/html_contents.html">

<frame src="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

[/demo]

本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個將第二個框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。

內(nèi)聯(lián)框架

[demo]

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<iframe src="./imagecopy1234567890/test.jpg"></iframe>

<p>一些老的瀏覽器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可見的。</p>

</body>

</html>

[/demo]

本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁中的框架）。

跳轉(zhuǎn)至框架內(nèi)的一個指定的節(jié)

[demo]

<html>

<frameset cols="20%,80%">

<frame src="/example/html/frame_a.html">

<frame src="/example/html/link.html#C10">

</frameset>

</html>

[/demo]

本例演示兩個框架。其中的一個框架設(shè)置了指向另一個文件內(nèi)指定的節(jié)的鏈接。這個"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C10"> 進(jìn)行標(biāo)識。

使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

[demo]

<html>

<frameset cols="180,*">

<frame src="/example/html/content.html">

<frame src="/example/html/link.html" name="showframe">

</frameset>

</html>

[/demo]

本例演示兩個框架。左側(cè)的導(dǎo)航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標(biāo)。第二個框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。

一點都不會程序也不懂程序，也從來沒有接觸過程序語言，能不能做前端網(wǎng)頁布局，答案是肯定的，CSS層疊樣式是一塊不同于程序且與程序相似的一種語言。說它與程序相似因為它也像程序代碼一樣需要寫且是英文一般的代碼等特性。說它不同于程序是因為CSS代碼不像程序需要通過服務(wù)器解釋與處理，而是直接由瀏覽器解釋而直接呈現(xiàn)給瀏覽用戶。CSS是比較有規(guī)律非常簡單且容易掌握的一種語言。您只需要記住掌握這些規(guī)律那就恭喜您已經(jīng)會CSS。CSS有什么規(guī)律？第一就是有屬于他自己的名稱，也叫選擇器，第二就是要有他的屬性類似這種格式{key：value}。第三要把css名稱放到html代碼中，要想學(xué)會html就是多看別人的網(wǎng)頁源代碼總結(jié)經(jīng)驗，了解html基礎(chǔ)可以多看看html相關(guān)教程，尤其是新手，一定要自己動手制作DIV與CSS頁面，遇到問題要多問（問答）及多查看資料，多做筆記。進(jìn)步成為高手的關(guān)鍵是自己動手多制作頁面。在網(wǎng)頁html中查看源代碼會看到很多代碼，包括html標(biāo)簽、css的標(biāo)簽等。

附?div與css布局代碼：

用瀏覽器打開效果圖：

在線咨詢

上一篇：用jsp-include指令動態(tài)加載文件
下一篇：JavaWeb前后端上傳文件的幾種方式

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

推薦閱讀

肖sir_html之表格標(biāo)簽

使用Jinja2模板引擎生成html報告

CSS-元素的顯示與隱藏

行的軟件壓力測試實

和HTML標(biāo)簽相關(guān)的字符串格式化

如何使用 Chart.js 在 JavaS...

html5簡介、選項輸入框、表單元...

關(guān)于android的webView的內(nèi)容

南京網(wǎng)站優(yōu)化選擇域名的4個重要...

HTML前端常用標(biāo)簽(復(fù)習(xí))

小紅の前端教程-布局篇-H5+CSS3...

跟我學(xué)JS逆向-CSS字體加密破解

HTML 腳本

在學(xué)習(xí)html？這一篇文章就夠了

學(xué)習(xí)HTML5的學(xué)習(xí)方法大匯總，收藏帖

Charles修改頁面數(shù)據(jù)

HTML表單3（下拉列表、多行文字...

Python+selenium自動化生成測試報告

最好用的免費素材網(wǎng)站都在這里~...

ubuntu 安裝包管理界面在 W...

整合營銷服務(wù)商

一文詳解CSS常見的五大布局

您的項目需求