排行榜列表二

最终效果:

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;}

原文链接:https://www.novelrd.cn/banzhu/shuoming/84.html,转载请注明出处。

0

评论0

没有账号? 注册  忘记密码?