|
結(jié)構(gòu)層
現(xiàn)在我們將結(jié)構(gòu)層在前一個(gè)案例的基礎(chǔ)上作了一下調(diào)整，因此就成了下面這樣一種結(jié)構(gòu)了：
<div class="box">
<!--第一行—頂部*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<!--第二行—中間內(nèi)容區(qū)*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">內(nèi)容主體區(qū)域</div>
<!--第三行—底部*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
樣式層
下面是主要的樣式設(shè)置：
/*總?cè)萜?/
.box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
.box span{display:block;}
/*頂部樣式*/
.top{height:10px;padding:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;background:#ff0000;}/*左上角*/
.t_r{float:right;background:#ff0000;}/*右上角*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*這是可左右伸展的區(qū)域，兩例留出空白便于放置左右角容器*/
/*中間樣式*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*兩列等高*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左邊框*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右邊框*/
/*底部樣式*/
.b_m{padding:0 10px;height:10px;}/*這是可左右伸展的區(qū)域，兩例留出空白便于放置左右列同高容器*/
.b_m span{width:100%;height:10px;font-size:0%;background:#7F0000;}
.b_l,.b_r{height:10px;font-size:0%;width:10px;margin-top:-10px;}
.b_l{float:left;background:#ff0000;}/*左下角*/
.b_r{float:right;background:#ff0000;}/*右下角*/
經(jīng)過上述設(shè)置后，我們的九宮格就算完成了，它是“牢不可破”的，會(huì)隨著內(nèi)容主體的寬高動(dòng)態(tài)地向各個(gè)方向自由伸展。在此模型中，為了演示的效果，我將總?cè)萜鞯膶挾仍O(shè)置了一個(gè)百分比50%，你可以根據(jù)你的實(shí)際需要調(diào)整它的大小，其內(nèi)部會(huì)隨著它的寬度值自動(dòng)填充整個(gè)區(qū)域，不會(huì)撐破父容器。如下圖所示：
你可以用八張圖片來制作一個(gè)漂亮的九宮格盒子�？纯此耐昝辣憩F(xiàn)。
本模型在以下瀏覽器中測(cè)試通過：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2934922-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6805.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 牢不可破的九宮格布局 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 牢不可破的九宮格布局 [2]
