九宮格是一種比較古老的設(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ā)表評論。
|