一、简要描述
新闻列表,带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;}
用到的图片
评论前必须登录!
注册