您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > ［冰極峰教程系列之一］：九宮格基本布局

［冰極峰教程系列之一］：九宮格基本布局

文章來源：365jz.com 點擊數(shù)：795 更新時間：2009-09-14 10:33 參與評論

原創(chuàng)：冰極峰轉(zhuǎn)載請注明出處時間：2009年6月18日 12:05:34

冰極峰教程系列之一：九宮格基本布局

冰極峰教程系列之二：牢不可破的九宮格布局

冰極峰教程系列之三：三層分離的完美九宮格

冰極峰教程系列之四：九宮格應(yīng)用案例--極酷網(wǎng)頁播放器設(shè)計

冰極峰教程系列之五：無hack并支持透明圓角框的全兼容九宮格布局

九宮格是一種比較古老的設(shè)計，它最基本的表現(xiàn)其實就像是一個三行三列的表格。其實它最初是在window的c/s結(jié)構(gòu)中用得比較多，比如我們經(jīng)?？吹杰浖械囊粋€窗體，其實就是一個九宮格的典型應(yīng)用，因為窗體需要在八個方向拉伸，所以在C/S軟件中大量采用這種技術(shù)來布局設(shè)計。在B/S系統(tǒng)大行其道的當(dāng)今社會，這種布局逐漸被一些網(wǎng)頁設(shè)計師運(yùn)用在網(wǎng)頁中去，用得最多的就是在圓角框布局中應(yīng)用。

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

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

這樣的結(jié)構(gòu)是最有利于內(nèi)容區(qū)域隨屏幕分辯率不同而自動伸展寬高，這種結(jié)構(gòu)也是網(wǎng)頁設(shè)計師是最想要的一種布局結(jié)構(gòu)，它靈動而從容。

下面我們就來實現(xiàn)它：

【結(jié)構(gòu)層】：

因為它要適應(yīng)八個方向的伸展，所以每個方向都用一個div來實現(xiàn)，少一個則靈活性就不足。那么根據(jù)這個原理，我們可以得到如下的結(jié)構(gòu)：

<div class="box">
    <div class="t_l"></div>
    <div class="t_m"></div>
    <div class="t_r"></div>

    <div class="m_l"></div>
    <div class="m_m">內(nèi)容區(qū)</div>
    <div class="m_r"></div>

    <div class="b_l"></div>
    <div class="b_m"></div>
    <div class="b_r"></div>
</div>

【樣式層】：

根據(jù)結(jié)構(gòu)，我們可以寫出基本的樣式?；緦崿F(xiàn)原理，是利用將總?cè)萜?box設(shè)置為相對定位并設(shè)置overflow:hidden;讓超出它的地方全部被切除，并將其里面的八個方向的div設(shè)為絕對定位，并將它們的z-index設(shè)置為2，然后將四個角容器分別設(shè)置到四個角落上。

.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;}

【注意】：

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

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

.t_m{ z-index:1;width:100%; }

2、對于m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設(shè)為一個非常大的值，我們將它設(shè)置為20000px，讓它一直向下垂直平鋪，然后因為總?cè)萜髟O(shè)置了overflow:hidden，會將多余的部分切除。

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

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

IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基本的九宮格(http://www.cnblogs.com/binyong)</title> <style type="text/css"> *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:50px auto;padding:10px;background:#F34703;} .t_l,.t_m,.t_r{position:absolute;top:0;z-index:2;height:10px;font-size:0%;} .t_l{left:0;width:10px;background:blue;} .t_m{z-index:1;width:100%;background:orange;} .t_r{right:0;width:10px;background:blue;} .m_l,.m_r{position:absolute;z-index:2;width:10px;} .m_l{top:0px;left:0;z-index:1;background:orange;height:2000px;} .m_r{top:0px;right:0;z-index:1;background:orange;height:2000px;} .b_l,.b_m,.b_r{position:absolute;bottom:0;z-index:2;height:10px;font-size:0%;} .b_l{left:0;width:10px;background:blue;} .b_m{z-index:1;width:100%;background:orange;} .b_r{right:0;width:10px;background:blue;} .m_m{width:100%;font-size:12px;color:#fff;} h3{text-align:center;font-size:14px;line-height:26px;} .m_m p{line-height:22px;padding:0 20px;} </style> </head> <body> <div class="box"> <div class="t_l"></div> <div class="t_m"></div> <div class="t_r"></div> <div class="m_l"></div> <div class="m_m"> <h3>九宮格--基本模型</h3> <p>這是一個九宮格基本布局模型，未加載任何圖片，請隨意拉伸縮放窗體大小，看看九宮格向各個方向自由伸展。</p> <p>本模型測試在以下幾個瀏覽器中完全通過：</p> <p>IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。</p> <p style="text-align:right">更多原創(chuàng)請訪問：<a title="去網(wǎng)站看看">冰極峰</a></p> </div> <div class="m_r"></div> <div class="b_l"></div> <div class="b_m"></div> <div class="b_r"></div> </div> </body> </html>

似乎到這兒就該結(jié)束了，然而….

要是細(xì)心的朋友在測試本模型時會發(fā)現(xiàn)，在IE6瀏覽器中，會與一個BUG不期而遇，那就是［IE6寬高值奇數(shù)1px BUG］，估且這么稱呼吧，因為對于這個BUG，網(wǎng)絡(luò)上并沒有一個統(tǒng)一的稱呼。

這個bug的激發(fā)條件是：

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

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

所以當(dāng)你在IE6瀏覽器中縮小窗口，并進(jìn)行拖拉縮放時，最右邊和下面的兩個小方塊和父容器中會出現(xiàn)一個１px的空距。

如果你覺得不用考慮IE6的話，那么這種布局就已經(jīng)基本滿足你的需要了。

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

（后文待續(xù)...）

Tag標(biāo)簽: html,css