武林網(wǎng)(www.companysz.com)文章簡(jiǎn)介：這里所說(shuō)有彈性，指的是背景去自適應(yīng)屏幕寬度，而固寬呢，則是讓正文內(nèi)容無(wú)論在寬屏還是窄屏中都能自動(dòng)居中。

在當(dāng)今用戶的顯示器越來(lái)越大的今天，之前的1024*768固寬布局有點(diǎn)越來(lái)越不合時(shí)宜，對(duì)大屏幕的用戶而言，兩側(cè)空空的留白給人第一眼的印象是嚴(yán)重的屏幕浪費(fèi)，作為網(wǎng)頁(yè)設(shè)計(jì)師的你有責(zé)任給這一批用戶一個(gè)良好的用戶界面。

當(dāng)然為了減少這種屏幕的浪費(fèi)，采用彈性流體布局是最好的解決方案，它可以充分利用屏幕空間，無(wú)論你是多大分辯率的用戶，都能盡情滿屏展示內(nèi)容。然而因?yàn)榉N種限制，目前的網(wǎng)頁(yè)完全采用流體彈性布局條件還不具備(特別是瀏覽器廠商對(duì)標(biāo)準(zhǔn)的肆意蹂躪以及CSS標(biāo)準(zhǔn)的不完全支持等等)。作為夾在用戶和廠商的中間者，我們只能以一種兼容的心態(tài)去適應(yīng)兩者的差距。所以，作為一種過(guò)渡的解決方案，有了這樣一種布局：彈性+固寬布局。

這里所說(shuō)有彈性，指的是背景去自適應(yīng)屏幕寬度，而固寬呢，則是讓正文內(nèi)容無(wú)論在寬屏還是窄屏中都能自動(dòng)居中。夾縫中求生存，以滿足不同大小分辯率用戶的需要。如下圖所示的設(shè)計(jì)就是一個(gè)典型的樣例。

圖一

廢話少說(shuō)，言歸正傳，我們就來(lái)制作一個(gè)這樣的布局結(jié)構(gòu)：

首先構(gòu)建結(jié)構(gòu)層：

分析一下結(jié)構(gòu)層，一個(gè)網(wǎng)頁(yè)一般包括頁(yè)頭，內(nèi)容區(qū)和頁(yè)腳三大部分，我們將頁(yè)頭和內(nèi)容放在一個(gè)容器層，取名為wrapper，而將頁(yè)腳獨(dú)立出來(lái)，取名為footer，為什么要這樣設(shè)計(jì)，我們想讓這個(gè)頁(yè)腳在內(nèi)容區(qū)不滿一屏的情況下也是絕對(duì)居底的。

我們將wrapper和footer這兩個(gè)容器設(shè)置100%的寬度，讓它自動(dòng)適應(yīng)屏幕的寬度。并且也將header頁(yè)頭區(qū)域也設(shè)置成100%寬度。這樣我們可以在頁(yè)頭和頁(yè)腳中插入一張可以水平平鋪的圖片，使頁(yè)頭和頁(yè)腳的背景在大屏幕下能水平充滿整個(gè)屏幕空間。

作為正文內(nèi)容，我們一般的做法是，當(dāng)分辯率變大，讓它居中顯示，兩側(cè)留出空白。因?yàn)轫?yè)頭區(qū)域已經(jīng)設(shè)置為100%寬度，所以我們?cè)趆eader中再添加一個(gè)容器層inheader，它來(lái)作為真正的頁(yè)頭文字內(nèi)容的載體，我們?cè)俳o它設(shè)置一個(gè)固定的寬度值，比如是960像素寬，然后讓它自動(dòng)居中。

#inheader{width:960px;height:110px; margin:0 auto; }

這樣頁(yè)頭的正文浮動(dòng)haeader的上層，這兩個(gè)層可以設(shè)置不同的背景圖片，形成一個(gè)疊加的頁(yè)頭效果，它能自動(dòng)適應(yīng)更大的屏幕分辯率。

同樣的道理，頁(yè)腳也可以采用這種方法來(lái)實(shí)現(xiàn)。

在上面的結(jié)構(gòu)層，我在中間內(nèi)容區(qū)沒(méi)有采用這種方法，而是做了一點(diǎn)變通，我們可以看到在content這個(gè)內(nèi)容區(qū)中，沒(méi)有內(nèi)嵌一個(gè)容器，而只有一個(gè)容器。如果我們?yōu)榱俗屨膬?nèi)容的兩側(cè)在大分辯率下兩側(cè)不顯得太空洞，該怎么辦呢，當(dāng)然你可以采用頁(yè)頭和頁(yè)腳的做法，在它的內(nèi)容再加一個(gè)div。當(dāng)然為了減少嵌套，我們可以采用變通的辦法。我們可以將一張超大的圖片加在body中背景中，并用background-position來(lái)定位居中顯示這張圖片，這樣在內(nèi)容區(qū)兩側(cè)的圖片就顯示出來(lái)了。

本博客就是一個(gè)具體案例，在大分辯率下看看本博客兩側(cè)圖片，然后縮小窗口，就可以看到兩側(cè)圖片在1024*768時(shí)只顯示了一小塊，而正文內(nèi)容始終居中顯示的。

為了演示效果，我們加入一些其它顏色調(diào)置，最后的樣式如下所示： 

測(cè)試demo:

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]