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

在上篇文章曾说过。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 热文

GOTOP5 条评论 To 无聊——写了一个TOP10的样式

繁体字转换器说道：

2009-03-17 02:43 上午

终于现身了!!嘿嘿

回复
芒果说道：

2009-03-13 09:30 上午

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

回复
xiaorsz 说道：

2009-02-27 02:05 上午

终于现身了!!

回复
等待... 说道：

2009-02-26 20:05 下午

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

回复
深蓝心语说道：

2009-02-26 16:23 下午

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

回复

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

GOTOP5 条评论 To 无聊——写了一个TOP10的样式

发表评论取消回复

分类

正在加载数据...

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

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

GOTOP5 条评论 To 无聊——写了一个TOP10的样式

发表评论 取消回复

分类

正在加载数据...

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

发表评论取消回复