|
九宮格是一種比較古老的設(shè)計(jì)，它最基本的表現(xiàn)其實(shí)就像是一個(gè)三行三列的表格。其實(shí)它最初是在window的c/s結(jié)構(gòu)中用得比較多，比如我們經(jīng)�？吹杰浖械囊粋�(gè)窗體，其實(shí)就是一個(gè)九宮格的典型應(yīng)用，因?yàn)榇绑w需要在八個(gè)方向拉伸，所以在C/S軟件中大量采用這種技術(shù)來布局設(shè)計(jì)。在B/S系統(tǒng)大行其道的當(dāng)今社會(huì)，這種布局逐漸被一些網(wǎng)頁設(shè)計(jì)師運(yùn)用在網(wǎng)頁中去，用得最多的就是在圓角框布局中應(yīng)用。
下圖演示了九宮格的基本布局：
從上圖可以看出，每一行包括三列，其中藍(lán)色方塊是頂角，這四個(gè)塊是寬高固定的區(qū)域，而黃色的四個(gè)區(qū)域分別是四條邊，這些都是要水平或垂直平鋪的，而中間的橙色區(qū)域是裝載內(nèi)容的主要區(qū)域。
這樣的結(jié)構(gòu)是最有利于內(nèi)容區(qū)域隨屏幕分辯率不同而自動(dòng)伸展寬高，這種結(jié)構(gòu)也是網(wǎng)頁設(shè)計(jì)師是最想要的一種布局結(jié)構(gòu)，它靈動(dòng)而從容。
下面我們就來實(shí)現(xiàn)它：
結(jié)構(gòu)層：
因?yàn)樗m應(yīng)八個(gè)方向的伸展，所以每個(gè)方向都用一個(gè)div來實(shí)現(xiàn)，少一個(gè)則靈活性就不足。那么根據(jù)這個(gè)原理，我們可以得到如下的結(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)，我們可以寫出基本的樣式�；緦�(shí)現(xiàn)原理，是利用將總?cè)萜?box設(shè)置為相對定位并設(shè)置overflow:hidden;讓超出它的地方全部被切除，并將其里面的八個(gè)方向的div設(shè)為絕對定位，并將它們的z-index設(shè)置為2，然后將四個(gè)角容器分別設(shè)置到四個(gè)角落上。
.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;}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 九宮格基本布局 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 九宮格基本布局 [1]
第 2 頁 
