牢不可破的九宫格布局

以下为引用的内容：

<!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>牢不可破的九宫格布局（http://www.cnblogs.com/binyong）</title>
<style type="text/css">
/*
布局名称：牢不可破的九宫格
作者：冰极峰
博客地址：http://www.cnblogs.com/binyong
*/
*{margin:0;padding:0;font-size:12px;}
body{text-align:center;color:#fff;}/*ie5.5不支持margin的居中对齐*/
/*总容器*/
.box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
.box span{display:block;}
/*顶部样式*/
.top{height:10px;padding:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;background:#ff0000;}/*左上角*/
.t_r{float:right;background:#ff0000;}/*右上角*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*这是可左右伸展的区域，两例留出空白便于放置左右角容器*/
/*中间样式*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*两列等高*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左边框*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右边框*/
/*底部样式*/
.b_m{padding:0 10px;height:10px;}/*这是可左右伸展的区域，两例留出空白便于放置左右列同高容器*/
.b_m span{width:100%;height:10px;font-size:0%;background:#7F0000;}
.b_l,.b_r{height:10px;font-size:0%;width:10px;margin-top:-10px;}
.b_l{float:left;background:#ff0000;}/*左下角*/
.b_r{float:right;background:#ff0000;}/*右下角*/
/*内容区*/
.context{background:#D45F00;}
h3{text-align:center;font-size:14px;width:80%;margin:0 auto;line-height:26px;}
p{line-height:22px;padding:0 20px;text-align:left;}
a:link,a:visited{color:#fff;font-weight:bold;}
a:hover{color:green;}
</style>
</head>
<body>
<div class="box">
<BGSOUND CEP="5" />
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<BGSOUND CEP="6" />
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">
<h3>牢不可破的九宫格布局</h3>
<p>这是一个九宫格布局模型，未加载任何图片，请随意拉伸缩放窗体大小，会看到九宫格向各个方向自由弹性伸展。</p>
<p>本模型修改了上一个版本的不足，用浮动的方法避开了ie6的宽高值奇数1px Bug问题，完美地实现所有主流浏览器全部兼容通过。</p>
<p>本模型测试在以下几个浏览器中完全通过：</p>
<p>IE5.5、 IE6、 IE7、 IE8、 FF3、 TT、 Maxthon2.1.5、 Opera9.6、 Safari4.0、 Chrome2.0。</p>
<p style="text-align:right">更多原创请访问：<a href="http://www.cnblogs.com/binyong" title="去网站看看">冰极峰博客</a></p>
<p style="text-align:right">博客地址：http://www.cnblogs.com/binyong</a></p>
</div>
<BGSOUND CEP="7" />
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
</body>
</html>