网页布局之九宫格
九宫格虽然嵌套了一些标签，但对于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="width: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>运行示例：
<!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="width: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> 预览代码