简明现代魔法 -> 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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们