九宫格虽然嵌套了一些标签，但对于IE6、IE7来讲为了达到预期的美术效果，这中间需要进行权衡；无论怎么讲，他还是很多精华之处。
先看下面的效果，典型的圆角：
虽然圆角有很多的实现方案：
1、使用DIV进行模拟
2、可以使用wekit或moz的一些私有属性进行模拟…
3、使用VML进行处理
4、….
九宫格它的嵌套方式是左、中、右，大致的结构如下：
<div class="mod mod2 …"><!--这里可以附加更多CLASS来改变整体的表现-->
<div class="modelTL">
<div class="modelTR">
<div class="modelTM"></div>
</div>
</div>
<div class="modelML">
<div class="modelMR">
<div class="modelMM"></div>
</div>
</div>
<div class="modelBL">
<div class="modelBR">
<div class="modelBM"></div>
</div>
</div>
</div>
无论怎么变化，样式命名都可以遵循规范：modelTL、modelTR、modelTM、modelML、modelMR、modelMM、modelBL、modelBR、modelBM
最终的结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>九宫格</title>
<style type="text/css">
*{margin:0; padding:0;}
html, body{font:12px/1.4 sans-serif,Tahoma,Arial,"宋体"; white-space:normal; word-break:break-all; height:100%; }
body {background-color:#fff;}
img{border:0;}
a{outline:none;}
input{font-size:12px;}
.ipt,textarea{font-size:12px;border:1px solid #ccc; color:#b3b3b3; background:#fff;}
i,em,b{font-style:normal; font-weight:normal;}
a:hover{color:#000;}
.clear{display:block; height:1px; overflow:hidden; clear:both; background:none; border:none;}
.model{margin-bottom:5px;}
.modelTL,.modelTR,.modelTM,.modelBL,.modelBR,.modelBM{background-image:url(https://cahty.googlecode.com/svn/trunk/images/mod.gif); overflow:hidden;}
.modelTL{height:30px; background-repeat:no-repeat; padding-left:2px;}
.modelTR{height:30px; background-repeat:no-repeat; background-position:right -80px; padding-right:2px;}
.modelTM{height:30px; background-repeat:repeat-x; background-position:0 -40px;}
.modelBL{height:11px; background-repeat:no-repeat; padding-left:2px; background-position:0 -120px; clear:both;}
.modelBR{height:11px; background-repeat:no-repeat; background-position:right -200px; padding-right:2px;}
.modelBM{height:11px; background-repeat:repeat-x; background-position:0 -160px;}
.modelML{border-left:1px solid #ACACAC; border-right:1px solid #ACACAC; padding:0 10px; background:#fff; clear:both;}
.tit h3{font-size:14px; /*color:#292D88;*/ color:#C6C6C6;}
.tit h3 i{font-weight:bold;}
.titL,.titR{display:none;}
.titM{height:30px; overflow:hidden; line-height:30px;padding:0px 8px;}
.titM a{float:right; color:#666; text-decoration:none;}
.titM a:hover{color:#000; text-decoration:underline;}
.tit h3 span{font-weight:normal; color:#b3b3b3; font-size:12px;}
</style>
</head>
<body>
<div class="model" style="240px; margin:50px;">
<div class="modelTL">
<div class="modelTR">
<div class="modelTM">
<div class="tit">
<!--<div class="titL"></div>
<div class="titR"></div>-->
<div class="titM">
<a href="javascript:;">查看更多个人动态</a>
<h3>我的动态</h3>
</div>
</div>
</div>
</div>
</div>
<div class="modelML">
<div class="modelMR">
<div class="modelMM">
<div>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
<p>放内容了....</p>
</div>
</div>
</div>
</div>
<div class="modelBL">
<div class="modelBR">
<div class="modelBM"></div>
</div>
</div>
</div>
</body>
</html>
运行示例：