DIV结构如下：
　　 │body {}　/*这是一个HTML元素*/
　　 └# tab1 {}　/*页面层容器*/
　　　　　 ├. tablist {}　/*标题栏目*/
　　　　　 ├. tabcontent {}　/*页面内容*/

html代码如下：

<div id="tab1">
<div class="tablist"><h6>排行榜</h6><span><a href="#">更多»</a></span></div>
<div class="tabcontent">
<ul>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.70版发布</a><span>2009-11-04</span></li>
<li><a href="#">» [官方新闻] 杰奇网络2009年“十·一”放假通知</a><span>2009-09-30</span></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.60正式发布，免费版同步提供...</a><span>2009-05-20</span></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.60版发布</a><span>2009-03-12</span></li>
<li><a href="#">» [官方新闻] 杰奇网络2009春节放假通知</a><span>2009-02-03</span></li>
<li><a href="#">» [产品新闻] JIEQI CMS 1.5免费版发布</a><span>2008-09-24</span></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.50 + WAP插件发布</a><span>2008-06-16</span></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.40版发布</a><span>2007-12-03</span></li>
<li><a href="#">» [产品新闻] 杰奇在线漫画系统1.00版发布</a><span>2007-06-05</span></li>
<li><a href="#">» [产品新闻] 杰奇小说连载系统1.30版发布</a><span>2007-04-07</span></li>
</ul>
</div>
</div>

CSS样式如下：

*{margin:0px; padding:0px;}
body{font-size:12px; color:#333; line-height:22px; }
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#FF0000;}
#tab1{ margin:20px auto; width:420px; overflow:hidden; border:solid 1px #6BB1DD;}
.tablist{float:right; background:url(images/tl.gif) repeat-x; width:420px; height:28px; line-height:28px;}
h6{font-size:14px; float:left; color:#0065A5; padding-left:10px;}
.tablist span{float:right; padding-right:10px;}
.tabcontent{ padding:5px 10px 5px 10px; float:left; width:400px;}
.tabcontent li a{float:left;}
.tabcontent li span{float:right; color:#939393;}