深山老林

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/3061093.html

表格的九宫格实在是很经典，可惜是属于表格布局，在用CSS布局的页面中实在不想使用，于是就做了一个DIV的九宫格。(*~v~*)代码如下：

--------------------------HTML----------------------------------
<div id="ot_right">
  <div class="right-tr"><div class="right-tl"><div class="right-tm"></div></div></div>
  <div class="right-mr"><div class="right-ml">内容</div></div>
  <div class="right-br"><div class="right-bl"><div class="right-bm"></div></div></div>
 </div>
----------------------------------------------------------------

--------------------------CSS----------------------------------
/*====公用====*/
*{
/* 通用消除边距偏差 */
 margin:0;
 padding:0;
}
body{
/* 页面主体模块 */
 font-size:75%;
 line-height:1.5em;
 font-family:tahoma, MingLiu, Verdana, Helvetica;
 color:#333333;
}

/*==S==框====*/
#ot_right{
 width:470px;
 height:300px;
}
.right-tl{
/*左上框*/
 width:auto;
 height:16px;
 padding-left:16px;
 background:transparent url(bg_tl.gif) no-repeat left top;
}
.right-tm{
/*上框*/
 width:auto;
 height:16px;
 background:transparent url(bg_tm.gif) repeat-x left top;
}
.right-tr{
/*右上框*/
 width:auto;
 height:16px;
 padding-right:16px;
 background:transparent url(bg_tr.gif) no-repeat right top;
}
.right-bl{
/*左下框*/
 width:auto;
 height:16px;
 padding-left:16px;
 background:transparent url(bg_bl.gif) no-repeat left bottom;
}
.right-bm{
/*下框*/
 width:auto;
 height:16px;
 background:transparent url(bg_bm.gif) repeat-x left bottom;
}
.right-br{
/*右下框*/
 width:auto;
 height:16px;
 padding-right:16px;
 background:transparent url(bg_br.gif) no-repeat right bottom;
}
.right-ml{
/*左框*/
 width:auto;
 height:100%;
 padding-left:16px;
 background:transparent url(bg_ml.gif) repeat-y left top;
}
.right-mr{
/*右框 内容*/
 width:auto;
 height:100%;
 padding-right:16px;
 background:transparent url(bg_mr.gif) repeat-y right top;
}
/*==E==框====*/
----------------------------------------------------------------

演示下载(1155699643.rar)