仿迅雷综艺排行榜带数字的列表样式布局

发布时间：2018-10-15 02:45:49 所属栏目：活动来源：站长网

导读：仿迅雷综艺排行榜带数字的列表样式布局，本例特色：特色一：前面的数据字1到10的背景全部是用css来制作的，特色二：时间紧跟在标题之后，且当题过长时自动隐藏,但时间完全显示出来，不会被截断;特色三：本例完全兼容IE和 Firefox 。如果要让后面时间右对齐

　　仿迅雷综艺排行榜带数字的列表样式布局，本例特色：特色一：前面的数据字1到10的背景全部是用css来制作的，特色二：时间紧跟在标题之后，且当题过长时自动隐藏,但时间完全显示出来，不会被截断;特色三：本例完全兼容IE和Firefox。如果要让后面时间右对齐，在li span{ position:absolute; padding-left:5px; color:#CCC;}中，加个right:0;

　　示例：

<!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(/uploads/allimg/1106/dots.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>2009-6-21</li> <li><a href="#">杂技团美女演员的1训练演员的训练演员员的训练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">杂技团美女演员的训1练演员的训练演员的训练训练演练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">杂技团美女演员2的训练演员的训练演员的训练训练演员的训练演员的训练</a>2009-6-21</li> <li><a href="#">练演员的训练</a>2009-6-21</li> <li><a href="http://www.liehuo.net">练演员的训演员的训练</a>2009-6-21</li> <li><a href="#">练演员的训练演员的训练练</a>2009-6-21</li> <li><a href="#">练演员的练</a>2009-6-21</li> <li><a href="#">练演员的训练</a>2009-6-21</li> </ol> <hr /> 如果要让后面时间右对齐，在li span{ position:absolute; padding-left:5px; color:#CCC;}中，加个right:0; </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋江门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!