九宮格布局

2009-08-25 15:15:27

九宮格是一種比較古老的設計，它最基本的表現其實就像是乙個三行三列的**。其實它最初是在window的c/s結構中用得比較多，比如我們經常看 到軟體中的乙個窗體，其實就是乙個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在c/s軟體中大量採用這種技術來布局設計。在b/s系統大行其道 的當今社會，這種布局逐漸被一些網頁設計師運用在網頁中去，用得最多的就是在圓角框布局中應用。

下圖演示了九宮格的基本布局：

從上圖可以看出，每一行包括三列，其中藍色方塊是頂角，這四個塊是寬高固定的區域，而****的四個區域分別是四條邊，這些都是要水平或垂直平鋪的，而中間的橙色區域是裝載內容的主要區域。

這樣的結構是最有利於內容區域隨螢幕分辯率不同而自動伸展寬高，這種結構也是網頁設計師是最想要的一種布局結構，它靈動而從容。

下面我們就來實現它：

結構層：

因為它要適應八個方向的伸展，所以每個方向都用乙個div來實現，少乙個則靈活性就不足。那麼根據這個原理，我們可以得到如下的結構：

樣式層：

根據結構，我們可以寫出基本的樣式。基本實現原理，是利用將總容器.box設定為相對定位並設定overflow:hidden;讓超出它的地方全 部被切除，並將其裡面的八個方向的div設為絕對定位，並將它們的z-index設定為2，然後將四個角容器分別設定到四個角落上。

.box

.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r

內容區

注意：

這裡有兩個地方需要注意到：

1、就是t_m和b_m這兩個容器是需要水平平鋪的，所以需要將它的z-index設定為比左右兩角的div的z-index的值低，我們將它設定 為z-index:1;這樣它就置於t_l和t_r的下面了，然後，我們設定它的寬度為100%，讓它水平鋪滿整個第一行的寬度。

.t_m

2、對於m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設為乙個非常大的值，我們將它設定為20000px，讓它一直向下垂直平鋪，然後因為總容器設定了overflow:hidden，會將多餘的部分切除。

這樣乙個基本的九宮格布局就形成，你可以檢視下面的演示模型。

本模型在以下瀏覽器中測試通過：

基本的九宮格(http://www.cnblogs.com/binyong)

title

>

<

style

type

="text/css"

>

*  .box  

.t_l,.t_m,.t_r  

.t_l  

.t_m  

.t_r  

.m_l,.m_r  

.m_l  

.m_r  

.b_l,.b_m,.b_r  

.b_l  

.b_m  

.b_r  

.m_m  

h3  

.m_m p  

style

>

head

>

<

body

>

<

divclass

="box"

>

<

divclass

="t_l"

>

div>

<

divclass

="t_m"

>

div>

<

divclass

="t_r"

>

div>

<

divclass

="m_l"

>

div>

<

divclass

="m_m"

>

<

h3>

九宮格--基本模型

h3>

<

p>

這是乙個九宮格基本布局模型，未載入任何，請隨意拉伸縮放窗體大小，看看九宮格向各個方向自由伸展。

p>

<

p>

本模型測試在以下幾個瀏覽器中完全通過：

="去**看看"

>

冰極峰a

>

p>

div>

<

divclass

="m_r"

>

div>

<

divclass

="b_l"

>

div>

<

divclass

="b_m"

>

div>

<

divclass

="b_r"

>

div>

div>

body

>

html

>

似乎到這兒就該結束了，然而….

要是細心的朋友在測試本模型時會發現，在ie6瀏覽器中，會與乙個bug不期而遇，那就是［ie6寬高值奇數1px bug］，估且這麼稱呼吧，因為對於這個bug，網路上並沒有乙個統一的稱呼。

這個bug的激發條件是：

乙個相對定位的父容器，其子容器採用絕對定位的方式向左或向右靠齊，當父容器的寬度值為奇數時，父容器與子容器之間會存在１px的間隙。不能完全緊貼在一起。

而我這個演示模型剛好滿足了條件…

所以當你在ie6瀏覽器中縮小視窗，並進行拖拉縮放時，最右邊和下面的兩個小方塊和父容器中會出現乙個１px的空距。

如果你覺得不用考慮ie6的話，那麼這種布局就已經基本滿足你的需要了。

然而，對於一些比較追求完美的設計者來說，這是讓人無法容忍的。

……

網頁布局之九宮格

九宮格雖然巢狀了一些標籤，但對於ie6 ie7來講為了達到預期的美術效果，這中間需要進行權衡 無論怎麼講，他還是很多精華之處。先看下面的效果，典型的圓角 雖然圓角有很多的實現方案 1 使用div進行模擬 2 可以使用wekit或moz的一些私有屬性進行模擬 3 使用vml進行處理 4 九宮格它的巢狀...

網格布局 九宮格布局

寫三欄布局竟然忘了網格，把它加上，以及實現九宮格布局 網格布局 網格布局 right grid left content right left content right 九宮格布局使用table實現九宮格 123 4 5 67 8 9 body table table td table td sp...

九宮格問題

include include stl 雙端佇列容器 include include pos.h using namespace std ofstream fout sudoku.txt deque d int lay deque d int checkout pos p,int n int sud...