深山老林

2006-08-16[原]用DIV做九宫格

表格的九宫格实在是很经典，可惜是属于表格布局，在用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==框====*/
----------------------------------------------------------------