网页布局的九宫格基本布局
九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到软件中的一个窗体，其实就是一个九宫格的典型应用，因为窗体需要在八个方向拉伸，所以在C/S软件中大量采用这种技术来布局设计。在B/S系统大行其道的当今社会，这种布局逐渐被一些网页设计师运用在网页中去，用得最多的就是在圆角框布局中应用。
九宫格的基本布局实际上是每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而黄色的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。
这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。
下面我们就来实现它：
结构层：
因为它要适应八个方向的伸展，所以每个方向都用一个div来实现，少一个则灵活性就不足。那么根据这个原理，我们可以得到如下的结构：
<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> </div> <div class="m_r"></div> <div class="b_l"></div> <div class="b_m"></div> <div class="b_r"></div></div>
样式层：
根据结构，我们可以写出基本的样式。基本实现原理，是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除，并将其里面的八个方向的div设为绝对定位，并将它们的z-index设置为2，然后将四个角容器分别设置到四个角落上，四条边容器设置到四个方向上。
注意：
这里有两个地方需要注意到：
1、就是t_m和b_m这两个边容器是需要水平平铺的，所以需要将它的z-index设置为比左右两角的div的z-index的值低，我们将它设置为z-index:1;这样它就置于t_l和t_r的下面了，然后，我们设置它的宽度为100%，让它水平铺满整个第一行的宽度。
2、对于m_l，m_r这两个边div容器，因为要让背景向下垂直平铺，所以我们将它们的高度值设为一个非常大的值，我们将它设置为20000px，让它一直向下垂直平铺，然后因为总容器设置了overflow:hidden，会将多余的部分切除。
你可以查看下面的演示模型。
<!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>基本的九宫格</title><style type="text/css">*{margin:0;padding:0;}/* 九宫格：基本实现原理 *//* 1、将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除*/.box { position:relative; overflow:hidden; margin:50px auto; padding:10px; background-color:#F34703; width:50%}/* 2、将其里面的八个方向的div设为绝对定位 */.t_l,.t_m,.t_r, .b_l,.b_m,.b_r, .m_l,.m_r{ position:absolute;}/* 3、设置四个顶角容器的z-index为2,设置四条边容器的z-index为1,这样边容器在水平平铺和垂直平铺时就置于四个顶角容器的下面了*/.t_l,.t_r,.b_l,.b_r { z-index:2;}/* t_m和b_m这两个容器是需要水平平铺,所以设置边容器的z-index为1,这样边容器在水平平铺就会置于两边的顶角容器下面，设置t_m,b_m的宽度为100%,让它水平平铺整个第一行的宽度*/.t_m,.b_m{ z-index:1px; width:100%;background:orange;}/* m_l和m_r这两个容器是需要垂直平铺,所以设置边容器的z-index为1,这样边容器在垂直平铺就会置于两边的顶角容器下面，设置m_l,m_r的高度为绝对大，让它一直向下垂直平铺，然后因为总容器设置了overflow:hidden，会将多余的部分切除*/.m_l,.m_r{ z-index:1px; height:10000px; background:orange;}/* 4、定位八个方向容器 *//* 定位四个顶角的位置及大小 */.t_l { left:0; top:0; width:10px; height:10px; background:blue; }.t_r { right:0; top:0; width:10px; height:10px; background:blue;}.b_l { left:0; bottom:0; width:10px; height:10px; background:blue;}.b_r { right:0; bottom:0; width:10px; height:10px; background:blue;}/* 定位四条边的位置及大小 */.t_m { top:0; height:10px;}.b_m { bottom:0; height:10px;}.m_l { left:0; top:0;width:10px;}.m_r { right:0; top:0; width:10px;}.m_m{width:100%;font-size:12px;color:#fff;}.m_m h3{text-align:center;font-size:14px;line-height:26px;}.m_m p{line-height:22px;padding:0 20px;}</style><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> </div> <div class="m_r"></div> <div class="b_l"></div> <div class="b_m"></div> <div class="b_r"></div></div></body></html>