九宮格是一種比較古老的設計，它最基本的表現(xiàn)其實就像是一個三行三列的表格，
古老的網(wǎng)頁設計布局
。其實它最初是在window的c/s結構中用得比較多，比如我們經(jīng)�？吹杰浖械囊粋�窗體，其實就是一個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在C/S軟件中大量采用這種技術來布局設計。在B/S系統(tǒng)大行其道的當今社會，這種布局逐漸被一些網(wǎng)頁設計師運用在網(wǎng)頁中去，用得最多的就是在圓角框布局中應用。下圖演示了九宮格的基本布局：
從上圖可以看出，每一行包括三列，其中藍色方塊是頂角，這四個塊是寬高固定的區(qū)域，而黃色的四個區(qū)域分別是四條邊，這些都是要水平或垂直平鋪的，而中間的橙色區(qū)域是裝載內(nèi)容的主要區(qū)域。
這樣的結構是最有利于內(nèi)容區(qū)域隨屏幕分辯率不同而自動伸展寬高，這種結構也是網(wǎng)頁設計師是最想要的一種布局結構，它靈動而從容。
下面我們就來實現(xiàn)它：
結構層：
因為它要適應八個方向的伸展，所以每個方向都用一個div來實現(xiàn)，少一個則靈活性就不足，
電腦資料
《古老的網(wǎng)頁設計布局》(http://www.szmdbiao.com)。那么根據(jù)這個原理，我們可以得到如下的結構：
樣式層：
根據(jù)結構，我們可以寫出基本的樣式�；緦崿F(xiàn)原理，是利用將總容器.box設置為相對定位并設置overflow:hidden;讓超出它的地方全部被切除，并將其里面的八個方向的div設為絕對定位，并將它們的z-index設置為2，然后將四個角容器分別設置到四個角落上。
.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}
內(nèi)容區(qū)