網頁布局之九宮格基本布局

2024-08-30 08:36:49

字體：大中小

來源：轉載

供稿：網友

九宮格是一種比較古老的設計，它最基本的表現其實就像是一個三行三列的表格。其實它最初是在window的c/s結構中用得比較多，比如我們經常看到軟件中的一個窗體，其實就是一個九宮格的典型應用，因為窗體需要在八個方向拉伸，所以在c/s軟件中大量采用這種技術來布局設計。在b/s系統大行其道的當今社會，這種布局逐漸被一些網頁設計師運用在網頁中去，用得最多的就是在圓角框布局中應用。

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

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

這樣的結構是最有利于內容區域隨屏幕分辯率不同而自動伸展寬高，這種結構也是網頁設計師是最想要的一種布局結構，它靈動而從容。

下面我們就來實現它：

結構層：

因為它要適應八個方向的伸展，所以每個方向都用一個div來實現，少一個則靈活性就不足。那么根據這個原理，我們可以得到如下的結構：

樣式層：

根據結構，我們可以寫出基本的樣式。基本實現原理，是利用將總容器.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;}

注意：

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

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

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

2、對于m_l，m_r這兩個div容器，因為要讓背景向下垂直平鋪，所以我們將它們的高度值設為一個非常大的值，我們將它設置為20000px，讓它一直向下垂直平鋪，然后因為總容器設置了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">更多原創請訪問：<a href="http://www.cnblogs.com/binyong" title="去網站看看">冰極峰</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>