超酷的CSS列表排行榜-CSDN博客

<! 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 > 超酷的CSS列表排行榜 </ title >
 < meta http-equiv ="content-type" content ="text/html;charset=gb2312" >
 
 < style type ="text/css" >
 *
 {
 font-family : simsun ;
 margin : 0px ;
 padding : 0px ;
 }
 body
 {
 font-size : 12px ;
 text-align : center ;
 }
 ul, li
 {
 list-style : none ;
 }
 a
 {
 text-decoration : none ;
 color : #3381BF ;
 }
 a:hover
 {
 text-decoration : underline ;
 }
 #movie_rank
 {
 height : 260px ;
 }
 .box2
 {
 border : 1px solid #ADDFF2 ;
 text-align : left ;
 overflow : hidden ;
 color : #9C9C9C ;
 text-align : left ;
 }
 .box2
 {
 margin-bottom : 7px ;
 }
 .box2 h2
 {
 background : #EEF7FE ;
 height : 21px ;
 line-height : 21px ;
 overflow-y : hidden ;
 border-bottom : 1px solid #ADDFF2 ;
 color : #1974C8 ;
 font-size : 12px ;
 padding : 0px 8px ;
 }
 .box2 h2 a.more
 {
 float : right ;
 text-decoration : underline ;
 background : url() no-repeat 100% -123px ;
 padding-right : 8px ;
 font-weight : normal ;
 }
 .box2 h2 span
 {
 margin-left : 5px ;
 font-weight : normal ;
 color : #B9B7B8 ;
 }
 .box2 .inner
 {
 padding : 8px ;
 line-height : 18px ;
 overflow : hidden ;
 color : #3083C7 ;
 }
 .box2 a
 {
 color : #3083C7 ;
 white-space : nowrap ;
 }
 .rank_list
 {
 line-height : 14px ;
 margin : auto ;
 padding-top : 5px ;
 }
 .rank_list li
 {
 height : 14px ;
 margin-bottom : 8px ;
 width : 290px ;
 padding-left : 20px ;
 white-space : nowrap ;
 overflow : hidden ;
 position : relative ;
 }
 .rank_list li.top3 em
 {
 background : #FFE4B7 ;
 border : 1px solid #FFBB8B ;
 color : #FF6800 ;
 }
 .rank_list em
 {
 position : absolute ;
 left : 0 ;
 top : 0 ;
 width : 12px ;
 height : 12px ;
 border : 1px solid #B1E0F4 ;
 color : #6298CC ;
 font-style : normal ;
 font-size : 10px ;
 font-family : Arial ;
 background : #E6F0FD ;
 text-align : center ;
 line-height : 12px ;
 overflow : hidden ;
 }
 .rank_list span
 {
 position : absolute ;
 width : 60px ;
 color : #B7B7B7 ;
 text-align : right ;
 height : 14px ;
 background : #fff ;
 left : 110px ;
 }
 #movie_rank .rank_list span
 {
 position : absolute ;
 width : 40px ;
 color : #B7B7B7 ;
 text-align : right ;
 height : 14px ;
 background : #fff ;
 left : 260px ;
 }
 </ style >
</ head >
< body >
 
 < div class ="box2" id ="movie_rank" >
 < h2 >
 < a href ="#" class ="more" > 更多 </ a > 源码排行 </ h2 >
 < div class ="inner" >
 < ul class ="rank_list" >
 < li class ="top3" > 1 < a href ="#" > 艾恩An-Upload无组件上传类 </ a > 621 </ li >
 < li class ="top3" > 2 < a href ="#" > EasySlide jQuery图片轮显 </ a > 528 </ li >
 < li class ="top3" > 3 < a href ="#" > 通用Ajax无刷新表彰验证类 </ a > 432 </ li >
 < li > 4 < a href ="#" > 支持中文的鼠标取词VB源码 </ a > 374 </ li >
 < li > 5 < a href ="#" > 通用Ajax无刷新表彰验证类 </ a > 256 </ li >
 < li > 6 < a href ="#" > EasySlide jQuery图片轮显 </ a > 185 </ li >
 < li > 7 < a href ="#" > 支持中文的鼠标取词VB源码 </ a > 95 </ li >
 < li > 8 < a href ="#" > 多样式链接提示框组件 </ a > 85 </ li >
 < li > 9 < a href ="#" > 类似lightbox的无刷新图片显示插件 </ a > 51 </ li >
 < li > 10 < a href ="#" > 通用Ajax无刷新表彰验证类 </ a > 32 </ li >
 </ ul >
 </ div >
 </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/sophist/archive/2011/04/22/2025089.html