使用DIV解決固定寬度布局問題

作者：admin 2010-08-17 13:16:33

本文向大家簡單介紹一下如何使用DIV+CSS創建固定寬度的布局，很多Web構建人員傾向于使用固定寬度的布局進行頁面設計，因為它們能生成精確且可預知的結果。

你對使用DIV+CSS創建固定寬度的布局的方法是否了解，這里和大家分享一下，這種方法與打印布局非常接近，對于設計人員和訪問者來說都是一個很重要的舒適因素。

使用DIV+CSS創建固定寬度的布局

很多Web構建人員傾向于使用固定寬度的布局進行頁面設計，因為它們能生成精確且可預知的結果。這種方法與打印布局非常接近，對于設計人員和訪問者來說都是一個很重要的舒適因素；另外，對于包含很多大圖片和其它元素的內容，由于它們在流式布局中不能很好地表現，因此固定寬度布局也是處理這種內容的最好方法。

從table到div

近年來，設計人員都使用表（table）來創建固定寬度的布局。表的列和行是對設計人員的布局表格（grid）的一種可行的模擬，所以一點也不奇怪設計人員為什么采用HTML表來完成頁面布局。

然而，基于表的布局有一個明顯的問題。除了語義上不適合用表來進行布局之外，產生的代碼也很混亂，難于閱讀，甚至難于維護??尤其是在包含合并的表單元格（cell）和嵌套表時。

使用DIV進行頁面布局效果要好得多。除了這是推薦使用的最佳方法之外，代碼的裝載速度會更快，也更易于處理。

表及其單元格的格式（formatting）屬性被借用到固定寬度布局中，因為指定這些元素的尺寸相當簡單。其實通過DIV可以做到同樣的事情，只要確定DIV精確的維數并使用絕對和相對定位將這些DIV定位到頁面上即可。

一個固定寬度的例子

圖A

圖A展示了一個典型的固定寬度的布局，該布局由頂部的一個標題，一個三列內容的區域（主內容列，每側有一個工具條），和頁面底部的一個頁腳所組成。所有元素的寬度都是固定的；在瀏覽器窗口發布變化時它們的尺寸都不會變化。#p#

下面的XHTML標記生成圖A所示的頁面。（出于簡單考慮，內容被截短。）

<body> 
<DIVidDIVid="head"> 
<h1>header</h1> 
</DIV> 
<DIVidDIVid="columns"> 
<DIVidDIVid="side1"> 
<h3>side1</h3> 
<ul> 
<li>Letmenottothemarriageoftrueminds</li> 
<li>Admitimpediments;loveisnotlove</li> 
<li>Whichalterswhenitalterationfinds</li> 
<li>Orbendswiththeremovertoremove</li> 
<li>Oh,no,itisaneverfixedmark</li> 
</ul> 
</DIV> 
<DIVidDIVid="content"> 
<h2>maincontent</h2> 
<p>Thatlooksontempests...hisheightbetaken.</p> 
<p>Butbearsitout...alterationfinds.</p> 
<p>Whoseworth'sunknown,...theremovertoremove.</p> 
</DIV> 
<DIVidDIVid="side2"> 
<h3>side2</h3> 
<ul> 
<li>Letmenottothemarriageoftrueminds</li> 
<li>Admitimpediments;loveisnotlove</li> 
<li>Whichalterswhenitalterationfinds</li> 
</ul> 
</DIV> 
</DIV> 
<DIVidDIVid="foot"> 
<h3>footer</h3> 
<p>Orbendswith...heightbetaken.</p> 
</DIV> 
</body>

下面是將頁面設計為固定寬度布局的CSS代碼。

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;  
}

#p# 分解代碼

這段標記并不是特別地值得注意??只是在每個主要頁面元素的外面（標題、頁腳、工具條和主內容）包圍著DIV。每個DIV有一個id，相應的CSS樣式可以使用這個id引用它。只有一個額外的DIV（DIVid="columns"）包圍著三列內容區域。在InternetExplorer中將頁腳放在三列中最長一列的下面是必要的。

像平時用法一樣，CSS代碼完成所有的重要任務。首先它完成一些家務管理。Body樣式將頁面的邊距設為零，h2,h3樣式將默認間距設為零。否則的話，這該布局周圍就會有一個邊距，而在某些瀏覽器（比如Netscape和Mozilla）中標題將會在在主內容和頁腳的上面產生一個空白區域。

樣式DIV#head為標題DIV設置一個明確的高度和寬度。標題使用position:absolute,top:0px和left:0px規則顯式地定位在頁面的左上角。規則position:absolute是非常重要的，因為定位屬性（top、left、right、bottom）在常規（靜態）定位時會被忽略。然而要記住，任何絕對定位的元素都會從常規的頁面流中被移除掉，而屬于頁面流的元素將會像絕對定位元素不存在一樣被定位到頁面上。

◆樣式DIV#columns控制DIV的格式，使其充當三個列的容器。它使用position:relative創建屬于常規頁面流的一個元素（它會根據其內容進行擴展和適應，因而影響其它元素的定位），但是它將從其常規位置偏移。規則top:100px提供一個偏移量，將列容器向下推，使其覆蓋標題。

規則DIV#side1控制第一個工具條列的樣式。它設置該列的寬度（width:150px）并使用絕對定位將該列放置在其父元素的左上角。父元素是該列的DIV，如果該元素使用相對于body元素的相對定位，那么它將解釋top:0px規則而非你所期望的100px設置。規則DIV#side2以同樣的方式設置左工具條所用的列。DIV#side1和DIV#side2唯一不同之處是背景色和left:600px規則，后者將該列定位在其它兩列的右邊。

樣式DIV#content中的主內容所用的列的樣式控制與其它兩列的樣式控制相似。它顯式地設計寬度（width:450px）并使用left:150px和top:0px規則在其父元素（包圍著三個列的DIV）內定位該列。主要的不同之處在于position:relative規則。我們使用相對定位使主內容列可以影響其父元素（包圍著三個列的DIV）的尺寸并因此影響頁腳元素的尺寸。

◆樣式DIV#foot設置頁腳的寬度（width:750px），該樣式還包含一個clear:both規則，該規則保證它接在其它元素下面，而不是旁邊。由于它使用相對定位，所以它在頁面上的位置是由其它元素的流所決定的，在這里具體是由包圍著三個列的DIV所決定的。規則margin-top:100px是一個很重要的細節，它防止頁腳被上面的列所覆蓋。這些列在頁面流中從它們的常規位置偏移，從而為絕對定位的標題以及需要相應偏移的頁腳騰出空間。#p#

居中樣式的變化

在固定寬度頁面布局中最常見且主要的變化可能是固定寬度的內容塊漂在瀏覽器窗口的中間，而不是粘附于瀏覽器窗口的左邊。你可以很容易地實現這一效果，方法是在其余標記周圍（也就是body標簽內）添加一個包裝器（wrapper）DIV，并創建一個CSS樣式來居中那個DIV。

圖B

例如，圖B是在圖A的基礎上添加了一個標簽（<DIVid="wrapper">）和一個相應的CSS樣式后的結果。下面是新添加的CSS樣式的代碼：

DIV#wrapper{  
position:relative;  
margin-left:auto;  
margin-right:auto;  
top:20px;  
width:750px;  
background-color:#CCCCCC;  
}

這種方法之所以能用，是因為所有的布局DIV都是相對于它們的父元素相對定位的。在圖A中，標題、內容列和頁腳所在DIV的父元素是body標簽，但是在圖B中，它們的父元素是wrapperDIV。這種居中方法在“CreatingacenteredpagelayoutwithCSS（使用CSS創建居中頁面布局）”一文中有詳細的解釋。

本篇文章來自<A>IDC專家網</a>原文鏈接：http://www.soidc.net/articles/1213781627945/20070513/1214037411126_1.html

【編輯推薦】

DIV布局屬性用法詳盡解讀
實例解析：使用DIV CSS網頁布局實現Google首頁
Html中DIV和Span的區別揭秘
使用DIV CSS構架的三大好處
網頁文字在DIV+CSS布局中垂直居中的問題解析

責任編輯：佚名來源： soidc.net

DIV CSS

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

使用DIV解決固定寬度布局問題