header
  
  
  
  

 下面是將頁(yè)面設(shè)計(jì)為固定寬度布局的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# 分解代碼

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

像平時(shí)用法一樣，CSS代碼完成所有的重要任務(wù)。首先它完成一些家務(wù)管理。Body樣式將頁(yè)面的邊距設(shè)為零，h2,h3樣式將默認(rèn)間距設(shè)為零。否則的話，這該布局周?chē)蜁?huì)有一個(gè)邊距，而在某些瀏覽器（比如Netscape和Mozilla）中標(biāo)題將會(huì)在在主內(nèi)容和頁(yè)腳的上面產(chǎn)生一個(gè)空白區(qū)域。

樣式DIV#head為標(biāo)題DIV設(shè)置一個(gè)明確的高度和寬度。標(biāo)題使用position:absolute,top:0px和left:0px規(guī)則顯式地定位在頁(yè)面的左上角。規(guī)則position:absolute是非常重要的，因?yàn)槎ㄎ粚傩裕╰op、left、right、bottom）在常規(guī)（靜態(tài)）定位時(shí)會(huì)被忽略。然而要記住，任何絕對(duì)定位的元素都會(huì)從常規(guī)的頁(yè)面流中被移除掉，而屬于頁(yè)面流的元素將會(huì)像絕對(duì)定位元素不存在一樣被定位到頁(yè)面上。

◆樣式DIV#columns控制DIV的格式，使其充當(dāng)三個(gè)列的容器。它使用position:relative創(chuàng)建屬于常規(guī)頁(yè)面流的一個(gè)元素（它會(huì)根據(jù)其內(nèi)容進(jìn)行擴(kuò)展和適應(yīng)，因而影響其它元素的定位），但是它將從其常規(guī)位置偏移。規(guī)則top:100px提供一個(gè)偏移量，將列容器向下推，使其覆蓋標(biāo)題。

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

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

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

居中樣式的變化

在固定寬度頁(yè)面布局中最常見(jiàn)且主要的變化可能是固定寬度的內(nèi)容塊漂在瀏覽器窗口的中間，而不是粘附于瀏覽器窗口的左邊。你可以很容易地實(shí)現(xiàn)這一效果，方法是在其余標(biāo)記周?chē)ㄒ簿褪莃ody標(biāo)簽內(nèi)）添加一個(gè)包裝器（wrapper）DIV，并創(chuàng)建一個(gè)CSS樣式來(lái)居中那個(gè)DIV。

圖B

例如，圖B是在圖A的基礎(chǔ)上添加了一個(gè)標(biāo)簽（）和一個(gè)相應(yīng)的CSS樣式后的結(jié)果。下面是新添加的CSS樣式的代碼：

 
 
 
 

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

這種方法之所以能用，是因?yàn)樗械牟季諨IV都是相對(duì)于它們的父元素相對(duì)定位的。在圖A中，標(biāo)題、內(nèi)容列和頁(yè)腳所在DIV的父元素是body標(biāo)簽，但是在圖B中，它們的父元素是wrapperDIV。這種居中方法在“CreatingacenteredpagelayoutwithCSS（使用CSS創(chuàng)建居中頁(yè)面布局）”一文中有詳細(xì)的解釋。