 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 仿迅雷综艺排行榜带数字的列表样式 |
| 来源：源码爱好者 更新时间：2011/6/12 9:53:02 阅读次数： 我要投稿 |
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿迅雷综艺排行榜列表样式，强经典的</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; font-family:"新宋体";}
ol{ background:url(http://www.cwydesign.com/effects/UploadFiles_7074/201106/2011061209563190.jpg) no-repeat left -2px;}
li{position:relative; padding-left:20px; height:20px; overflow:hidden; line-height:20px; width:250px; list-style:none;padding-right:60px;}
li a{ display:inline-block; text-decoration:none; color:#000;}
li a:hover{ text-decoration:underline;}
li span{ position:absolute; padding-left:5px; color:#CCC;}
</style>
</head>
<body>
<ol>
<li><a href="#">杂技团美女演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的1训练演员的训练演员员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员的训1练演员的训练演员的训练训练演练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">杂技团美女演员2的训练演员的训练演员的训练训练演员的训练演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
<li><a href="http://www.codefans.net">练演员的训演员的训练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练演员的训练练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的练</a><span>2009-6-21</span></li>
<li><a href="#">练演员的训练</a><span>2009-6-21</span></li>
</ol>
<hr /><br />
如果要让后面时间右对齐，在li span{ position:absolute; padding-left:5px; color:#CCC;}中，加个right:0;
</body>
</html> |
| 特效说明： |
| 本例特色：特色一：前面的数据字1到10的背景全部是用css来制作的，特色二：时间紧跟在标题之后，且当题过长时自动隐藏,但时间完全显示出来，不会被截断;特色三：本例完全兼容IE和Firefox。如果要让后面时间右对齐，在li span{ position:absolute; padding-left:5px; color:#CCC;}中，加个right:0; |
|
| 上一篇文章： 仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果下一篇文章： 功能强大的漂亮计算器 |
|
|
|
注册 登录
