简明现代魔法 -> CSS层叠样式表 -> 排行榜单制作

排行榜单制作

2010-06-04

排行榜单在很多网站上可以看到，通过确切的页面点击率，将最热门的页面推荐给用户，是个不错的做法。

下面是简明现代魔法制作的一个排行的效果。

CSS Code

dl.style2 dt{padding:4px 0 0px 24px;}
.lefttitle dl.style2 dt.top1{background:url(../images/ladder1.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top2{background:url(../images/ladder2.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top3{background:url(../images/ladder3.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top4{background:url(../images/ladder4.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top5{background:url(../images/ladder5.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top6{background:url(../images/ladder6.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top7{background:url(../images/ladder7.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top8{background:url(../images/ladder8.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top9{background:url(../images/ladder9.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }
.lefttitle dl.style2 dt.top10{background:url(../images/ladder10.gif) 0 3px no-repeat; white-space:nowrap; padding-bottom:3px; }

HTML Code

  <div class="lefttitle">
  <dl class="style2 txt_black"> 
<dt class="top1"><a href="http://www.nowamagic.net/">2010软件收入百强企业出炉：华为居首</a></dt>
<dt class="top2"><a href="http://www.nowamagic.net/">谷歌发布全球前1000大网站：Facebook居首</a></dt>
<dt class="top3"><a href="http://www.nowamagic.net/">苹果前高管：留给微软和鲍尔默的时间不多了</a></dt>
<dt class="top4"><a href="http://www.nowamagic.net/">微软CEO鲍尔默：中国没有软件市场可言</a></dt>
<dt class="top5"><a href="http://www.nowamagic.net/">邓锋对话周鸿祎：揭开中美创新基因的差异（一）</a></dt>
<dt class="top6"><a href="http://www.nowamagic.net/">雅虎离职技术主管曝雅虎大量离职原因</a></dt>
<dt class="top7"><a href="http://www.nowamagic.net/">国产曙光星云超级计算机跃身世界第二位</a></dt>
<dt class="top8"><a href="http://www.nowamagic.net/">细数云计算应用六大误区 云计算会使IT专业人员失业？</a></dt>
<dt class="top9"><a href="http://www.nowamagic.net/">Google员工：公司正逐步淘汰Windows操作系统</a></dt>
<dt class="top10"><a href="http://www.nowamagic.net/">用友软件CTO薛峰谈七大技术重点 解读三代四级研发模式</a></dt>
  </dl>
  </div>