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

html代码如下：

<div id="tab1">
<div class="tablist"><h6>排行榜</h6><span><a href="#">更多»</a></span></div>
<ul class="tabcontent">
<li class="big"><a href="#">仙侠名作：尘缘</a><span>93936</span></li>
<li class="ico2"><a href="#">混世小农民</a><span>60463</span></li>
<li class="ico3"><a href="#">狩魔手记</a><span>47521</span></li>
<li class="ico4"><a href="#">全能炼金师</a><span>31276</span></li>
<li class="ico5"><a href="#">一起混过的日子</a><span>27520</span></li>
<li class="ico6"><a href="#">开国功贼</a><span>21709</span></li>
<li class="ico7"><a href="#">龙游天下</a><span>20625</span></li>
<li class="ico8"><a href="#">全能法神</a><span>19220</span></li>
<li class="ico9"><a href="#">武林帝国</a><span>19134</span></li>
<li class="ico10"><a href="#">近战召唤师</a><span>17849</span></li>
<li class="ico11"><a href="#">妻妾成群II</a><span>17640</span></li>
<li class="ico12"><a href="#">宦海风流</a><span>15775</span></li>
<li class="ico13"><a href="#">红情</a><span>15250</span></li>
<li class="ico14"><a href="#">青囊尸衣</a><span>14582</span></li>
<li class="ico15"><a href="#">我是村长</a><span>12483</span></li>
</ul>
</div>
</div>

CSS样式如下：

*{margin:0px; padding:0px;}
body{font-size:12px; color:#333;}
ul,li{ list-style-type:none;}
a{ color:#333; text-decoration:none;}
a:hover{color:#FF0000;}
#tab1{ margin:20px auto; width:260px; overflow:hidden; border:solid 1px #6BB1DD;}
.tablist{float:right; background:url(images/tl.gif) repeat-x; width:260px; 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:10px 0px 0px 10px; float:left; width:240px; overflow:hidden;}
.tabcontent li{padding-left:30px; width:210px; height:22px; *height:18px;}
.tabcontent li a{float:left;}
.tabcontent li span{float:right; color:#939393;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.big{background:url(images/bgpic2.gif) no-repeat;font-size:14px; font-weight:bold; padding:12px 0px 15px 0px;}
.ico2{background:url(images/bgpic2.gif) no-repeat 0px -48px;}
.ico3{background:url(images/bgpic2.gif) no-repeat 0px -69px;}
.ico4{background:url(images/bgpic2.gif) no-repeat 0px -90px;}
.ico5{background:url(images/bgpic2.gif) no-repeat 0px -110px;}
.ico6{background:url(images/bgpic2.gif) no-repeat 0px -132px;}
.ico7{background:url(images/bgpic2.gif) no-repeat 0px -153px;}
.ico8{background:url(images/bgpic2.gif) no-repeat 0px -174px;}
.ico9{background:url(images/bgpic2.gif) no-repeat 0px -195px;}
.ico10{background:url(images/bgpic2.gif) no-repeat 0px -219px;}
.ico11{background:url(images/bgpic2.gif) no-repeat 0px -240px;}
.ico12{background:url(images/bgpic2.gif) no-repeat 0px -261px;}
.ico13{background:url(images/bgpic2.gif) no-repeat 0px -282px;}
.ico14{background:url(images/bgpic2.gif) no-repeat 0px -303px;}
.ico15{background:url(images/bgpic2.gif) no-repeat 0px -324px;}