DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 利用負邊距技術制作自適應寬度布局的網頁
利用負邊距技術制作自適應寬度布局的網頁
編輯:CSS詳解     

合理使用負邊距技術,可以幫助我們創建很多有意思的布局,比如自適應浏覽器寬度的流體布局。國外關於使用負邊距創建這類布局的技術文檔,我看到的最早是04年 Ryan Brill 發表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 (04年 - -!國內剛小部分人開始關注WEB標准化),本文亦可看做是對其的中文翻譯版。

隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版,采用目前的主流--960px左右的寬度。

我認為,對於不太復雜的網站,采用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的,比如論壇頁面、博客頁面等。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。

這裡需要的用到的技術關鍵點就一則:負邊距。

【簡單的布局】

OK。我們現在開始。假設現在需要給自己的博客重新制作前台,界面的設計已經完成,就差代碼架構。我們希望博客的界面可以做到:左側的主要部分是博客文章內容,這部分需要在不同分辨率浏覽器下自適應寬度;而右側是側邊欄,這部分我們想做成一個固定250px寬,預期效果圖如下:

這是個典型的兩欄布局,我們來做一個初步的架構

<div id="header">頂部區域</div>
<div id="mainer">
<h1>使用負邊距創建自適應寬度的流體布局</h1>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
</div>
<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div id="footer">底部區域</div>

查看測試頁面一:


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表

body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}

定義mainer右邊距為-250px,使得右邊得以空出側邊欄的寬度,放置側邊欄。加上樣式表頁面請查看測試頁面二


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

OK,現在我們看到左側的內容區域已經為側邊欄空出了相應的空間,使得側邊欄放置在了它應該出現的位置。

【去除重疊部分】

我們這時會發現,左側的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的一個DIV層,來將左側文字部分設置一個足夠大的右邊距,使其不與側邊欄重疊。並將左側內容部分與側邊欄部分設置不同背景色,以示區分。

<div id="mainer">
<div id="main">
<h1>使用負邊距創建自適應寬度的流體布局</h1>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
</div>
</div>

增加的CSS

#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}

查看測試頁面三


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

【自適應高度】

這時候我們又發現了一個問題:如果左側長度繼續加長,那麼,右側側邊欄的下部會出現空白。我們希望可以實現視覺上的左右兩欄自適應等高。

這裡我們可以給外層的mainer DIV設置一個右對齊縱向重復的背靜圖片,圖片的寬度我們設置為250px,即同側邊欄寬度相同。

CSS部分我們加上

#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}

多數時候我們並不想設置全部寬度為浏覽器的寬度,多數時候我們會設置小於屏幕寬度的百分比。這種情況下,我們可以在左側內容及右側側邊欄外再套一個DIV層,並在側邊欄下加上一個清除浮動的層,來達到我們的目的。這個時候我們的XHtml會是下面這個樣子。

<div id="header">頂部區域</div>

<div id="wrapper" class="mid">
<div id="mainer">
<div id="main">
<h1>使用負邊距創建自適應寬度的流體布局</h1>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
</div>
</div>

<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div class="clear"></div>
</div>

<div id="footer">底部區域</div>

相應的CSS

#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}

查看測試頁面四:


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

Ryan Brill 在他的文章裡說,外層的wrapper與裡面的mainer兩個DIV都應該設置背景 background,以便解決IE裡的一個BUG。但我這裡只設置了mainer DIV的背景,在IE6、IE7、FF裡並未發現錯誤。可能他指的是IE5.x,這裡忽略。

【進階,三欄布局】

掌握了以上的方法,我們會發現制作一個三欄的布局也是很簡單的!OK。下面我們把上面的例子變下,我們需要一個三欄的布局,2側為固定寬度,中部為自適應寬度。這僅需要增加一點DIV。

<div id="header" class="mid">頂部區域</div>

<div id="wrapper" class="mid">
<div id="mainer">
<div id="main">

<div id="leftBar">
<h2>欄目標題</h2>
<ul>
<li>文章標題</li>
<li>文章標題</li>
<li>文章標題</li>
</ul>
</div>

<div id="inmain">
<h1>使用負邊距創建自適應寬度的流體布局</h1>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
<p>隨著越來越大的浏覽器的出現及普及,網站界面如何能滿足不同分辨率浏覽器使用者的浏覽需求,逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但,其實使用很小的技術就可以創建出符合WEB標准化的自適應布局。</p>
</div>

</div>
</div>

<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div class="clear"> </div>
</div>

<div id="footer" class="mid">底部區域</div>

以及另外一個背景圖片

CSS部分增加:

#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}

現在來看看我們的頁面,測試頁面五


 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

OK,大功告成~!!具體應用舉例嗎,俺的博客頁面就是 ^ ^

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved