兼容 ie6,7,8 Chrome Firefox
以及传统呈现模式（去掉DOCTYPE）
<!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>九宫图</title>
<style type="text/css">
body{background:#f2f2f2;}
.Box{ width:300px;}
.Box ul{margin:0; padding:0; list-style:none;}
.Box .t li{background:url(images/BoxTop.gif);height:32px;line-height:32px;}
.Box .m li{background:url(images/BoxAmb.gif);height:200px;}
.Box .b li{background:url(images/BoxBot.gif);height:8px;*line-height:8px; *font-size:0;}
.Box .l{ float:left;background-position:top left; background-repeat:repeat-y; width:7px; _margin-right:-3px;}
.Box .c{background-position:center!important;}
.Box .t .c{ font-weight:bold;}
.Box .m .c{background:#d5e5f3;}
.Box .r{ float:right;background-position:bottom right!important; background-repeat:repeat-y; width:7px;_margin-left:-3px;}
</style>
</head>
<body>
<div class="Box">
<ul class="t"><li class="l"></li><li class="r"></li><li class="c">Title</li></ul>
<ul class="m"><li class="l"></li><li class="r"></li><li class="c">content</li></ul>
<ul class="b"><li class="l"></li><li class="r"></li><li class="c"></li></ul>
</div>
<br />
<div class="Box">
<ul class="t"><li class="l"></li><li class="r"></li>
<li class="c">Killme</li></ul>
<ul class="m"><li class="l"></li><li class="r"></li><li class="c"><a href="http://www.cnblogs.com/killme/" target="_blank">http://www.cnblogs.com/killme/</a></li>
</ul>
<ul class="b"><li class="l"></li><li class="r"></li><li class="c"></li></ul>
</div>
</body>
</html>
效果图
下载 https://files.cnblogs.com/killme/HtmlBox.rar