中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

方法D:定位

<div id="header">
  ...頁首內(nèi)容...
</div>
<div id="content">
  ...主內(nèi)容...
</div>
<div id="sidebar">
  ...側(cè)邊欄...
</div>
<div id="footer">
  ...頁腳內(nèi)容...
</div>

方法D是使用相同的標(biāo)記源代碼結(jié)構(gòu),然后以最有效率的方式排列<div>:把主內(nèi)容放在側(cè)邊欄之前,關(guān)閉樣式的瀏覽器,屏幕閱讀器會先收到主內(nèi)容部分,再收到側(cè)邊欄,在定位時,標(biāo)記源代碼內(nèi)的順序與頁面元素出現(xiàn)的位置沒有關(guān)系.

能夠預(yù)測的高度

CSS內(nèi)容與前三個方法有點類似,第一個差異是對頁首指定的像素高度,我們需要能夠預(yù)測的高度以便稍后為側(cè)邊欄定位.

在這里隨機(jī)選了一個數(shù)字,而這需要根據(jù)頁首使用的內(nèi)容調(diào)整,像是標(biāo)志,導(dǎo)航欄,搜索表單等.

#header {
  height: 40px;
  background: #ccc;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

為各欄留下空間

接著,要為#content這個<div>設(shè)定右外補(bǔ)丁,就像前幾個方法一樣,這能為右側(cè)邊欄留下空間,稍后會使用絕對定位法(不是浮動)把右側(cè)邊欄放進(jìn)去.

#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

放進(jìn)側(cè)邊欄

最后,要使用絕對定位法把#sidebar這個<div>放到#content的邊界里,也必須去掉瀏覽器在頁面周圍加上的預(yù)設(shè)邊界,如此一來定位座標(biāo)在所有瀏覽器之內(nèi)就會一致了.

body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

在指定position:absolute之后,就能以top與right坐標(biāo)把#sidebar準(zhǔn)確的放到所想的位置(圖12-7).

圖12-7 以定位做出的兩欄布局效果

我們敘述了 "把 #sidebar這個<div>放到距離瀏覽器視窗上邊緣40像素,右邊緣0像素的位置",除此之外,也能用bottom和left指定坐標(biāo).

頁尾問題

以先前的方法浮動分欄時,可以用clear屬性確保頁尾橫跨整個瀏覽器視窗的寬度,而不受主內(nèi)容,側(cè)邊欄的長度影響.

在定位時,側(cè)邊欄的文檔流獨立于整個頁面之外,所以只要側(cè)邊欄比內(nèi)容還長,它就會蓋住頁尾部分.(圖12-8)

圖12-8 側(cè)邊欄與頁尾重疊

面對這個問題我常用的解決方法之一,是為頁尾指定與主內(nèi)容一樣的右外補(bǔ)丁,讓側(cè)邊欄能夠延伸超過頁尾.

使用這個方法的話,CSS需要調(diào)整成這樣:

body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  margin-right: 34%;
  padding: 20px;
  background: #eee;
  }

這個解決方案在內(nèi)容很短,側(cè)邊欄很長的頁面上看起來有點怪,但是它的確有效,結(jié)果可參照圖12-9,示范了側(cè)邊欄避開頁尾的情況.

圖12-9 外補(bǔ)丁和主內(nèi)容相同的頁尾

除了使用float屬性之外,也能用定位制造出分欄布局,讓我們看看最后一個選擇,方法D.

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 標(biāo)記語言——CSS布局 [4] 下一頁 標(biāo)記語言——CSS布局 [6]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。