前端第9款：新闻列表排行榜

一、简要描述

新闻列表，带1、2、3等等数字，这个你懂的！

二、相关代码

1、HTML代码

    <div class="ranklist">
            <ol>
                    <li class="top">
                            <em>01</em><p><a href="#" title="">jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动</a></p><span class="num">32万下载</span>
                    </li>
                    <li class="top">
                            <em>02</em><p><a href="#" title="">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能</a></p><span class="num">32万下载</span>
                    </li>
                    <li class="top">
                            <em>03</em><p><a href="#" title="">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>
                    </li>
                    <li>
                            <em>04</em><p><a href="#" title="">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p><span class="num">32万下载</span>
                    </li>
                    <li>
                            <em>05</em><p><a href="#" title="">jquery 图片切换插件制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a></p><span class="num">32万下载</span>
                    </li>
                    <li>
                            <em>06</em><p><a href="#" title="">jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选</a></p><span class="num">32万下载</span>
                    </li>
            </ol>
            <div class="clear"></div>
    </div>

2、CSS代码

.ranklist{border:solid 1px #ddd;padding:10px 10px 0 10px;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}

用到的图片