等待-放飞梦想

勤现在-乐将来

无聊——写了一个TOP10的样式

Await / 前端交互 / 2009/02/26 3:02 / 热度(3,446)

在上篇文章曾说过。BLOG要恢复正常更新，但却没做到。一直没心情写文章，最近总是不能静下心来，工作上的生活上的…太多的事让我无法有个平静的心情。唠叨到这了…囧…

像这种TOP排行榜的样式我想大家都见过，没啥难度。我也不说啥了，直接上图看源码吧…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> TOP - 10 By Await http://leotheme.cn/ 2009-02-26</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #666; font-size: 12px; text-align: center; } a { text-decoration: none; color: #333366; } #top10 {width: 250px; margin: 50px 0; padding: 10px; list-style: none; border: 1px dashed #336699; background: #fff;} #top10 li { text-align: left; margin: 1px 0; padding-left: 30px; height: 18px; line-height: 18px; } .li_01 { background:#AFCAE4 url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 0 no-repeat; } .li_02 { background:#BFD5EA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -20px no-repeat; } .li_03 { background:#CFDFEF url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -40px no-repeat; } .li_04 { background:#DFEAF4 url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -60px no-repeat; } .li_05 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -80px no-repeat; } .li_06 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -100px no-repeat; } .li_07 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -120px no-repeat; } .li_08 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -140px no-repeat; } .li_09 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -160px no-repeat; } .li_10 { background:#EFF4FA url(http://leotheme.cn/wp-content/uploads/2009/02/top10.gif) 0 -180px no-repeat; } </style> </head> <body> <ul id="top10"> <li class="li_01"><a href="http://leotheme.cn/">不知道取个啥标题好! </a></li> <li class="li_02"><a href="http://leotheme.cn/">Opera中国版“朱雀”正式发布</a></li> <li class="li_03"><a href="http://leotheme.cn/">简单几步显示/隐藏文章内容 </a></li> <li class="li_04"><a href="http://leotheme.cn/">给你的侧边栏添加一个登陆入口 </a></li> <li class="li_05"><a href="http://leotheme.cn/">用jQuery处理文本框的焦点[focus]状态</a> </li> <li class="li_06"><a href="http://leotheme.cn/">CSS清除浮动的一些方法 </a></li> <li class="li_07"><a href="http://leotheme.cn/">AddThis——为你的文章添加一个Share按钮</a> </li> <li class="li_08"><a href="http://leotheme.cn/">Windows 7对比Vista的23项细节改动 </a></li> <li class="li_09"><a href="http://leotheme.cn/">WordPress2.7beta版的用户退出问题 </a></li> <li class="li_10"><a href="http://leotheme.cn/">WordPress主题高级技巧</a></li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

很简单的一个东西，这里把前面的图片放在一张上面了。此文纯是当任务发布

top 热文

评论(5)

繁体字转换器
2009/03/17

终于现身了!!嘿嘿

回复
芒果
2009/03/13

可以用插件实现
http://www.mangguo.org/top-10-display-most-popular-post-list/

回复
xiaorsz
2009/02/27

终于现身了!!

回复
等待...
2009/02/26

当作UL的背景虽然可以,但不灵活…而且觉得有点怪怪的…

回复
深蓝心语
2009/02/26

看下gif 如果高度定了，不如把图直接在 ul 做个背景算了。。

回复

等待-放飞梦想

无聊——写了一个TOP10的样式

评论(5)

发表评论 取消回复

发表评论取消回复