網頁彈性流體布局的CSS設計

彈性布局最大的優點就是能充分利用螢幕空間。無論用戶端分辯率多大，都能自動適應寬度的變化

彈性布局最大的優點就是能充分利用螢幕空間。無論用戶端分辯率多大，都能自動適應寬度的變化。

圖一

看看上面這幅圖片，這是國外的一個網站，它本身是固定寬度布局的，我們的布局就以這幅圖為基礎來講解的。當然，我不會全面介紹如何製作這個完整頁面，我只針對重點做一下講解。

其實做一個彈性布局，相對來說是比較簡單的，但是這種布局雖簡單，可是對於細節上的把握才是這種布局的精髓。彈性布局雖說有這麼好的優點，可是卻有比較致命的缺陷：

1. 如果不對這種布局設定一個最小寬度，當使用者縮小視窗到足夠小時，會對布局產生致命的影響。造成嚴重影響布局錯位。

2. 當一個頁面彈性布局時，對於裡面的圖片會產生巨大的影響。因為到目前為至，還沒有解決圖片隨百分比縮放的問題。

所以這篇文章對於布局的講解可能還相對少些，而更多的是解決上面的兩個問題，我相信只要解決了上面的兩個問題，這種布局相對來說就容易多了。

一、解決最小寬度

 

一般彈性布局都是利用百分比來設定一個容器的寬度。這樣就能自動適應螢幕的寬度了。但是寬度值不能完全由使用者自由縮放，我們必須在這個百分比寬度限制其最小寬度，當使用者縮小視窗到一定值，就不讓視窗再縮放了。

熟悉CSS的朋友都知道，有這樣四個屬性：

Min-width:最小寬度

Max-width:最大寬度

Min-height:最小高度

Max-height:最大高度

這四個屬性剛好能解決這個問題，是不是比較欣喜，可是，別忙，雖說它們能解決這個問題，可是卻有一個嚴重的問題，使用者使用最多的瀏覽器IE6卻不支援這幾個屬性，這是一件非常糟糕的事情。我們總不能丟棄使用者最多的瀏覽器吧！

目前網上比較流行的有四種方法來解決讓IE6支援這四種屬性：

1.     在CSS中expression來設定最小寬度，比較費記憶體。

2.     用嵌套DIV,然後用margin位移模仿實現，多冗餘結構。

3.     用JQ架構實現，為一個屬性加一個JS架構，有點不划算。

4.     用純JS代碼實現。

前面三種都有劣勢，請各自選擇最合適的方法，我偏重於最後一種，這是國外的一個牛人實現的，相關例子可以看這兒：http://www.doxdesk.com/software/js/minmax.html

有了這個JS檔案，你只需要在頭部調用這個JS檔案就可以了。

PS:在展示模型中為了方便，我將這個JS作為內部引用的方式調用，你們在實際應用中將這個JS檔案建立為一個JS外部檔案，如下方式調用：

<script type="text/javascript" src="minmax.js"></script>

我們在樣式表中將min-width應用到#wrapper和#footer這兩個容器就行了，並分別設定它們寬度為100%，OK，現在我們解決了最小寬度的問題。

二、解決彈性圖片

 

我們看看上面哪張圖片，要做成彈性布局，就要解決頁頭圖片的動態縮放。而這是一張圖片，我們都知道圖片是沒有辦法隨比例縮放的，該怎麼辦呢？

我們可以換一個思維方式，將這張圖片在PS中做一點改動，我們可以將這張圖片分割成左右兩部分，並將它們合并成一張圖片。如下圖所示：

 

 

圖二

第一圖片在容器中以背景定位的方式左上定位，而第二張片則右下定位，用兩個容器分裝兩張圖片，內層的圖片層級比外層圖片層級高，它會浮動到第一張圖片上蓋住它，當然這第二張要做成透明底色的png或gif圖片，因為png-24位透明圖片在IE6下不受支援，所以我們改成PNG-8位的透明圖片，這樣雖說圖片品質上有點影響，但可以保證在IE6中暢通無阻。

所以頁頭的結構層應該是如下的樣子：

<div id="header">
    <div id="inhead">
        <p>頁頭內容</p>
    </div>
</div>

針對這樣的結構我們可以寫出如下的樣式：

外層樣式：

#header{
  height:150px;
  width:100%;
  background:#000 url(image/header-bg.png) no-repeat left top;
}

內層樣式：

#inhead{
  height:150px;
  width:100%;
  background:url(image/header-bg.png) no-repeat right bottom;
  text-align:center;
  color:#fff;
}

經過這樣的改進後，我們的頁頭就做成彈性的圖片，它在瀏覽器中顯示就應該如下：

 

 

圖三 

這樣，一個彈性布局就算基本完成了。最終的效果如下圖所示：

 

圖四

後記：

最後不得不提的是，這種布局是有局限性的，並不是每個網頁都能適合用這種方式來布局。因為流體彈性布局本身存在的缺陷。它不能用於設計得太過華麗、圖片豐富的頁面，因為有些圖片是沒有辦法做到象上圖哪樣伸縮的。我想正是因為這個原因，它限制了這種布局的廣泛流傳。

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