<!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">
<!--把下面代码加到<head>与</head>之间-->
<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>
<!--把下面代码加到<body>与</body>之间-->
<div class="box2" id="movie_rank">
<h2>
<a href="#" class="more">更多</a>源码排行</h2>
<div class="inner">
<ul class="rank_list">
<li class="top3"><em>1</em><a href="#">艾恩An-Upload无组件上传类</a><span>621</span></li>
<li class="top3"><em>2</em><a href="#">EasySlide jQuery图片轮显</a><span>528</span></li>
<li class="top3"><em>3</em><a href="#">通用Ajax无刷新表彰验证类</a><span>432</span></li>
<li><em>4</em><a href="#">支持中文的鼠标取词VB源码</a><span>374</span></li>
<li><em>5</em><a href="#">通用Ajax无刷新表彰验证类</a><span>256</span></li>
<li><em>6</em><a href="#">EasySlide jQuery图片轮显</a><span>185</span></li>
<li><em>7</em><a href="#">支持中文的鼠标取词VB源码</a><span>95</span></li>
<li><em>8</em><a href="#">多样式链接提示框组件</a><span>85</span></li>
<li><em>9</em><a href="#">类似lightbox的无刷新图片显示插件</a><span>51</span></li>
<li><em>10</em><a href="#">通用Ajax无刷新表彰验证类</a><span>32</span></li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超酷的CSS列表排行榜</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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>
<!--把下面代码加到<body>与</body>之间-->
<div class="box2" id="movie_rank">
<h2>
<a href="#" class="more">更多</a>源码排行</h2>
<div class="inner">
<ul class="rank_list">
<li class="top3"><em>1</em><a href="#">艾恩An-Upload无组件上传类</a><span>621</span></li>
<li class="top3"><em>2</em><a href="#">EasySlide jQuery图片轮显</a><span>528</span></li>
<li class="top3"><em>3</em><a href="#">通用Ajax无刷新表彰验证类</a><span>432</span></li>
<li><em>4</em><a href="#">支持中文的鼠标取词VB源码</a><span>374</span></li>
<li><em>5</em><a href="#">通用Ajax无刷新表彰验证类</a><span>256</span></li>
<li><em>6</em><a href="#">EasySlide jQuery图片轮显</a><span>185</span></li>
<li><em>7</em><a href="#">支持中文的鼠标取词VB源码</a><span>95</span></li>
<li><em>8</em><a href="#">多样式链接提示框组件</a><span>85</span></li>
<li><em>9</em><a href="#">类似lightbox的无刷新图片显示插件</a><span>51</span></li>
<li><em>10</em><a href="#">通用Ajax无刷新表彰验证类</a><span>32</span></li>
</ul>
</div>
</div>
</body>
</html>
