|
在當(dāng)今用戶的顯示器越來越大的今天，之前的1024*768固寬布局有點(diǎn)越來越不合時(shí)宜，對(duì)大屏幕的用戶而言，兩側(cè)空空的留白給人第一眼的印象是嚴(yán)重的屏幕浪費(fèi)，作為網(wǎng)頁(yè)設(shè)計(jì)師的你有責(zé)任給這一批用戶一個(gè)良好的用戶界面。
當(dāng)然為了減少這種屏幕的浪費(fèi)，采用彈性流體布局是最好的解決方案，它可以充分利用屏幕空間，無論你是多大分辯率的用戶，都能盡情滿屏展示內(nèi)容。然而因?yàn)榉N種限制，目前的網(wǎng)頁(yè)完全采用流體彈性布局條件還不具備(特別是瀏覽器廠商對(duì)標(biāo)準(zhǔn)的肆意蹂躪以及CSS標(biāo)準(zhǔn)的不完全支持等等)。作為夾在用戶和廠商的中間者，我們只能以一種兼容的心態(tài)去適應(yīng)兩者的差距。所以，作為一種過渡的解決方案，有了這樣一種布局：彈性+固寬布局。
這里所說有彈性，指的是背景去自適應(yīng)屏幕寬度，而固寬呢，則是讓正文內(nèi)容無論在寬屏還是窄屏中都能自動(dòng)居中。夾縫中求生存，以滿足不同大小分辯率用戶的需要。如下圖所示的設(shè)計(jì)就是一個(gè)典型的樣例。
圖一
廢話少說，言歸正傳，我們就來制作一個(gè)這樣的布局結(jié)構(gòu)：
首先構(gòu)建結(jié)構(gòu)層：
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下結(jié)構(gòu)層，一個(gè)網(wǎng)頁(yè)一般包括頁(yè)頭，內(nèi)容區(qū)和頁(yè)腳三大部分，我們將頁(yè)頭和內(nèi)容放在一個(gè)容器層，取名為wrapper，而將頁(yè)腳獨(dú)立出來，取名為footer，為什么要這樣設(shè)計(jì)，我們想讓這個(gè)頁(yè)腳在內(nèi)容區(qū)不滿一屏的情況下也是絕對(duì)居底的。其具體的實(shí)現(xiàn)原理可以參考這篇文章：《CSS Sticky Footer: 完美的CSS絕對(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，它來作為真正的頁(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è)腳也可以采用這種方法來實(shí)現(xiàn)。
在上面的結(jié)構(gòu)層，我在中間內(nèi)容區(qū)沒有采用這種方法，而是做了一點(diǎn)變通，我們可以看到在content這個(gè)內(nèi)容區(qū)中，沒有內(nèi)嵌一個(gè)容器，而只有一個(gè)容器。如果我們?yōu)榱俗屨膬?nèi)容的兩側(cè)在大分辯率下兩側(cè)不顯得太空洞，該怎么辦呢，當(dāng)然你可以采用頁(yè)頭和頁(yè)腳的做法，在它的內(nèi)容再加一個(gè)div。當(dāng)然為了減少嵌套，我們可以采用變通的辦法。我們可以將一張超大的圖片加在body中背景中，并用background-position來定位居中顯示這張圖片，這樣在內(nèi)容區(qū)兩側(cè)的圖片就顯示出來了。
本博客就是一個(gè)具體案例，在大分辯率下看看本博客兩側(cè)圖片，然后縮小窗口，就可以看到兩側(cè)圖片在1024*768時(shí)只顯示了一小塊，而正文內(nèi)容始終居中顯示的。
為了演示效果，我們加入一些其它顏色調(diào)置，最后的樣式如下所示：
*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body > #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}/* 必須使用和footer相同的高度,最小寬度ie6中加JS解決 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
position: relative;
margin-top: -54px; /* footer高度的負(fù)值 */
height: 54px;/* footer高度*/
width:100%;
min-width:960px;/*最小寬度ie6中加JS解決*/
clear:both;
background:#666;
text-align:center;
color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 auto;height:692px;}
#content p{line-height:30px;padding:0 30px;color:#fff;}
/*說明: 需要注意的就是#main的padding值、footer的高度和負(fù)margin值，需要保持一致。下面是著名的萬能float閉合Clearfix Hack*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
測(cè)試demo：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
原文：http://www.cnblogs.com/binyong/archive/2009/05/07/1451319.html
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2926540-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6703.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
