您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 固定寬度布局Div+CSS如何創(chuàng)建？
固定寬度布局Div+CSS如何創(chuàng)建？
文章來源：365jz.com 點擊數(shù)：1237 更新時間：2009-06-03 23:58 參與評論
用 XHTML 和 CSS 實現(xiàn)兩列或三列頁面布局的各個方面。到目前為止，所有例子都使用流式布局（也就是布局會自動擴展和適應瀏覽器窗口的寬度）?，F(xiàn)在是時候考慮另外一種主要的頁面布局方法了，這種布局方法是固定寬度布局。
很多 Web 構建人員傾向于使用固定寬度的布局進行頁面設計，因為它們能生成精確且可預知的結果。這種方法與打印布局非常接近，對于設計人員和訪問者來說都是一個很重要的舒適因素；另外，對于包含很多大圖片和其它元素的內(nèi)容，由于它們在流式布局中不能很好地表現(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。
從table 到 div
近年來，設計人員都使用表（table）來創(chuàng)建固定寬度的布局。表的列和行是對設計人員的布局表格（grid）的一種可行的模擬，所以一點也不奇怪設計人員為什么采用 HTML 表來完成頁面布局。
然而，基于表的布局有一個明顯的問題。除了語義上不適合用表來進行布局之外，產(chǎn)生的代碼也很混亂，難于閱讀，甚至難于維護——尤其是在包含合并的表單元格（cell）和嵌套表時。
使用 div 進行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會更快，也更易于處理。
表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因為指定這些元素的尺寸相當簡單。其實通過 div 可以做到同樣的事情，只要確定 div 精確的維數(shù)并使用絕對和相對定位將這些 div 定位到頁面上即可。
一個典型的固定寬度的布局，該布局由頂部的一個標題，一個三列內(nèi)容的區(qū)域（主內(nèi)容列，每側有一個工具條），和頁面底部的一個頁腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發(fā)布變化時它們的尺寸都不會變化。
以下是XHTML代碼。
Example Source Code [www.52css.com]
以下是將頁面設計為固定寬度布局的 CSS 代碼。
Example Source Code [www.52css.com]
分解代碼
這段標記并不是特別地值得注意——只是在每個主要頁面元素的外面（標題、頁腳、工具條和主內(nèi)容）包圍著 div。每個 div 有一個 id，相應的 CSS 樣式可以使用這個 id 引用它。只有一個額外的 div（div id="columns"）包圍著三列內(nèi)容區(qū)域。在 Internet Explorer 中將頁腳放在三列中最長一列的下面是必要的。
像平時用法一樣，CSS 代碼完成所有的重要任務。首先它完成一些家務管理。Body樣式將頁面的邊距設為零，h2, h3樣式將默認間距設為零。否則的話，這該布局周圍就會有一個邊距，而在某些瀏覽器（比如 Netscape 和 Mozilla）中標題將會在在主內(nèi)容和頁腳的上面產(chǎn)生一個空白區(qū)域。
樣式div#head為標題 div 設置一個明確的高度和寬度。標題使用 position: absolute, top: 0px和 left: 0px規(guī)則顯式地定位在頁面的左上角。規(guī)則 position: absolute是非常重要的，因為定位屬性（top、left、right、bottom）在常規(guī)（靜態(tài)）定位時會被忽略。然而要記住，任何絕對定位的元素都會從常規(guī)的頁面流中被移除掉，而屬于頁面流的元素將會像絕對定位元素不存在一樣被定位到頁面上。
樣式 div#columns控制 div 的格式，使其充當三個列的容器。它使用 position: relative創(chuàng)建屬于常規(guī)頁面流的一個元素（它會根據(jù)其內(nèi)容進行擴展和適應，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則 top: 100px提供一個偏移量，將列容器向下推，使其覆蓋標題。
規(guī)則 div#side1控制第一個工具條列的樣式。它設置該列的寬度（width: 150px）并使用絕對定位將該列放置在其父元素的左上角。父元素是該列的 div，如果該元素使用相對于 body 元素的相對定位，那么它將解釋 top: 0px規(guī)則而非你所期望的 100px設置。規(guī)則 div#side2以同樣的方式設置左工具條所用的列。div#side1和 div#side2唯一不同之處是背景色和 left: 600px規(guī)則，后者將該列定位在其它兩列的右邊。
樣式 div#content中的主內(nèi)容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設計寬度（width: 450px）并使用 left: 150px和 top: 0px規(guī)則在其父元素（包圍著三個列的 div）內(nèi)定位該列。主要的不同之處在于 position: relative規(guī)則。我們使用相對定位使主內(nèi)容列可以影響其父元素（包圍著三個列的 div）的尺寸并因此影響頁腳元素的尺寸。
樣式 div#foot設置頁腳的寬度（width: 750px），該樣式還包含一個 clear: both規(guī)則，該規(guī)則保證它接在其它元素下面，而不是旁邊。由于它使用相對定位，所以它在頁面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個列的 div 所決定的。規(guī)則 margin-top: 100px是一個很重要的細節(jié)，它防止頁腳被上面的列所覆蓋。這些列在頁面流中從它們的常規(guī)位置偏移，從而為絕對定位的標題以及需要相應偏移的頁腳騰出空間。
在前面的基礎上添加了一個標簽（<div id="wrapper">）和一個相應的 CSS 樣式后的結果。下面是新添加的 CSS 樣式的代碼：
Example Source Code [www.52css.com]
這種方法之所以能用，是因為所有的布局 div 都是相對于它們的父元素相對定位的。
很多 Web 構建人員傾向于使用固定寬度的布局進行頁面設計，因為它們能生成精確且可預知的結果。這種方法與打印布局非常接近，對于設計人員和訪問者來說都是一個很重要的舒適因素；另外，對于包含很多大圖片和其它元素的內(nèi)容，由于它們在流式布局中不能很好地表現(xiàn)，因此固定寬度布局也是處理這種內(nèi)容的最好方法。
從table 到 div
近年來，設計人員都使用表（table）來創(chuàng)建固定寬度的布局。表的列和行是對設計人員的布局表格（grid）的一種可行的模擬，所以一點也不奇怪設計人員為什么采用 HTML 表來完成頁面布局。
然而，基于表的布局有一個明顯的問題。除了語義上不適合用表來進行布局之外，產(chǎn)生的代碼也很混亂，難于閱讀，甚至難于維護——尤其是在包含合并的表單元格（cell）和嵌套表時。
使用 div 進行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會更快，也更易于處理。
表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因為指定這些元素的尺寸相當簡單。其實通過 div 可以做到同樣的事情，只要確定 div 精確的維數(shù)并使用絕對和相對定位將這些 div 定位到頁面上即可。
一個典型的固定寬度的布局，該布局由頂部的一個標題，一個三列內(nèi)容的區(qū)域（主內(nèi)容列，每側有一個工具條），和頁面底部的一個頁腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發(fā)布變化時它們的尺寸都不會變化。
以下是XHTML代碼。
Example Source Code [www.52css.com]<body>
<div id="head">
<h1>header</h1>
</div>
<div id="columns">
<div id="side1">
<h3>side1</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
</ul>
</div>
<div id="content">
<h2>main content</h2>
<p>That looks on tempests ... his height be taken.</p>
<p>But bears it out ... alteration finds.</p>
<p>Whose worth's unknown, ... the remover to remove.</p>
</div>
<div id="side2">
<h3>side2</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="foot">
<h3>footer</h3>
<p>Or bends with ... height be taken. </p>
</div>
</body>
<div id="head">
<h1>header</h1>
</div>
<div id="columns">
<div id="side1">
<h3>side1</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
<li>Or bends with the remover to remove</li>
<li>Oh, no, it is an ever fixed mark</li>
</ul>
</div>
<div id="content">
<h2>main content</h2>
<p>That looks on tempests ... his height be taken.</p>
<p>But bears it out ... alteration finds.</p>
<p>Whose worth's unknown, ... the remover to remove.</p>
</div>
<div id="side2">
<h3>side2</h3>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="foot">
<h3>footer</h3>
<p>Or bends with ... height be taken. </p>
</div>
</body>
以下是將頁面設計為固定寬度布局的 CSS 代碼。
Example Source Code [www.52css.com]body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#head {
position: absolute;
width:750px;
height:100px;
left:0px;
top: 0px;
background-color: #FFFF66;
}
div#columns {
position: relative;
width: 750px;
top: 100px;
background-color: #CCCCCC;
}
div#side1 {
position:absolute;
width:150px;
top: 0px;
left:0px;
background-color: #FF6666;
}
div#content {
position: relative;
width: 450px;
top: 0px;
left: 150px;
background-color: #999999;
}
div#side2 {
position:absolute;
width:150px;
top: 0px;
left: 600px;
background-color: #00FF66;
}
div#foot {
position: relative;
width: 750px;
clear: both;
margin-top: 100px;
background-color: #99FFFF;
}
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
h2,h3 {
margin-top: 0px;
padding-top: 0px;
}
div#head {
position: absolute;
width:750px;
height:100px;
left:0px;
top: 0px;
background-color: #FFFF66;
}
div#columns {
position: relative;
width: 750px;
top: 100px;
background-color: #CCCCCC;
}
div#side1 {
position:absolute;
width:150px;
top: 0px;
left:0px;
background-color: #FF6666;
}
div#content {
position: relative;
width: 450px;
top: 0px;
left: 150px;
background-color: #999999;
}
div#side2 {
position:absolute;
width:150px;
top: 0px;
left: 600px;
background-color: #00FF66;
}
div#foot {
position: relative;
width: 750px;
clear: both;
margin-top: 100px;
background-color: #99FFFF;
}
分解代碼
這段標記并不是特別地值得注意——只是在每個主要頁面元素的外面（標題、頁腳、工具條和主內(nèi)容）包圍著 div。每個 div 有一個 id，相應的 CSS 樣式可以使用這個 id 引用它。只有一個額外的 div（div id="columns"）包圍著三列內(nèi)容區(qū)域。在 Internet Explorer 中將頁腳放在三列中最長一列的下面是必要的。
像平時用法一樣，CSS 代碼完成所有的重要任務。首先它完成一些家務管理。Body樣式將頁面的邊距設為零，h2, h3樣式將默認間距設為零。否則的話，這該布局周圍就會有一個邊距，而在某些瀏覽器（比如 Netscape 和 Mozilla）中標題將會在在主內(nèi)容和頁腳的上面產(chǎn)生一個空白區(qū)域。
樣式div#head為標題 div 設置一個明確的高度和寬度。標題使用 position: absolute, top: 0px和 left: 0px規(guī)則顯式地定位在頁面的左上角。規(guī)則 position: absolute是非常重要的，因為定位屬性（top、left、right、bottom）在常規(guī)（靜態(tài)）定位時會被忽略。然而要記住，任何絕對定位的元素都會從常規(guī)的頁面流中被移除掉，而屬于頁面流的元素將會像絕對定位元素不存在一樣被定位到頁面上。
樣式 div#columns控制 div 的格式，使其充當三個列的容器。它使用 position: relative創(chuàng)建屬于常規(guī)頁面流的一個元素（它會根據(jù)其內(nèi)容進行擴展和適應，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則 top: 100px提供一個偏移量，將列容器向下推，使其覆蓋標題。
規(guī)則 div#side1控制第一個工具條列的樣式。它設置該列的寬度（width: 150px）并使用絕對定位將該列放置在其父元素的左上角。父元素是該列的 div，如果該元素使用相對于 body 元素的相對定位，那么它將解釋 top: 0px規(guī)則而非你所期望的 100px設置。規(guī)則 div#side2以同樣的方式設置左工具條所用的列。div#side1和 div#side2唯一不同之處是背景色和 left: 600px規(guī)則，后者將該列定位在其它兩列的右邊。
樣式 div#content中的主內(nèi)容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設計寬度（width: 450px）并使用 left: 150px和 top: 0px規(guī)則在其父元素（包圍著三個列的 div）內(nèi)定位該列。主要的不同之處在于 position: relative規(guī)則。我們使用相對定位使主內(nèi)容列可以影響其父元素（包圍著三個列的 div）的尺寸并因此影響頁腳元素的尺寸。
樣式 div#foot設置頁腳的寬度（width: 750px），該樣式還包含一個 clear: both規(guī)則，該規(guī)則保證它接在其它元素下面，而不是旁邊。由于它使用相對定位，所以它在頁面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個列的 div 所決定的。規(guī)則 margin-top: 100px是一個很重要的細節(jié)，它防止頁腳被上面的列所覆蓋。這些列在頁面流中從它們的常規(guī)位置偏移，從而為絕對定位的標題以及需要相應偏移的頁腳騰出空間。
在前面的基礎上添加了一個標簽（<div id="wrapper">）和一個相應的 CSS 樣式后的結果。下面是新添加的 CSS 樣式的代碼：
Example Source Code [www.52css.com]div#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:750px;
background-color: #CCCCCC;
}
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width:750px;
background-color: #CCCCCC;
}
這種方法之所以能用，是因為所有的布局 div 都是相對于它們的父元素相對定位的。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點擊進入論壇
------分隔線----------------------------
- 上一篇：Div+CSS布局入門教程
- 下一篇：貴人：如何分析百度降權的原因
