Div+Css实例：用CSS制作的热门内容排行效果-竞赛园地

栏目列表

当前位置：首页>>化学家园>>习题下载>>竞赛园地>>文章内容

Div+Css实例：用CSS制作的热门内容排行效果

发布时间：2008-12-26 点击：来源：中国IT人才网作者：will2011

Div+Css实例：用CSS制作的热门内容排行效果:
代*如下：

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://{域名已经过期}/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://{域名已经过期}/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div+Css实例：用CSS制作的热门内容排行效果--中国IT人才网!IT求职,IT招聘</title>
</head>
<body>
<style type="text/css">
/*基本样式定义开始*/
*{ margin:0; padding:0;}
body { font-size:12px; line-height:150%;}
td{ height:22px; padding:6px;}
a{font-size:12px; color:#000000; text-decoration:none;}
a:link{color:#3083C7; white-space:nowrap;}
a:visited{color:#3083C7;}
a:hover{text-decoration:underline; color:#3083C7;}
a:active{color:#3083C7;}
img{border:none;}
ul,li{ list-style-type:none;}
/*基本样式定义完成*/
.container{ width:240px; margin:20px auto; border:1px solid #ADDFF2; color:#9C9C9C; text-align:left;}
h2{ background:#EEF7FE; height:23px; line-height:23px; border-bottom:1px solid #ADDFF2; color:#1974C8; font-size:12px; padding:0px 8px;}
h2 a{ float:right; text-decoration:underline; padding-right:8px; font-weight:normal;}
.hot_news{ padding:8px; line-height:18px; overflow:hidden; color:#3083C7;}
.news_list{ line-height:16px; margin:auto; padding-top:3px;}
.news_list li{ height:16px; margin-bottom:4px; width:200px; padding-left:20px; white-space:nowrap; overflow:hidden; position:relative;}
.news_list li.top3 em{ background:#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;}
.news_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;}
</style>
</body>
<div class="container">
	<h2><a href="http://{域名已经过期}/programming/">更多>></a>热门文章排行</h2>
	<div class="hot_news">
		<ul class="news_list">
			 <li class="top3"><em>1</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=160">用CSS实现中英文双语导航菜单</a></li>
			 <li class="top3"><em>2</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=168">程序员是“工人”还是“白领”</a></li>
			 <li class="top3"><em>3</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=181">一个简单的滑动门效果</a></li>
			 <li><em>4</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=184">程序开发团队之团队精神篇</a></li>
			 <li><em>5</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=180">asp中判断函数总结</a></li>
			 <li><em>6</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=192">成功站长10个必备要点</a></li>
			 <li><em>7</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=192">10个SEO常用查询指令</a></li>
			 <li><em>8</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=169">用CSS实现中英文双语导航菜单</a></li>
			 <li><em>9</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=173">功能比界面重要</a></li>
			 <li><em>10</em><a href="http://{域名已经过期}/Programming/Info.asp?infoid=171">放松一下—站长版《死*不改》</a></li>
		 </ul>
	</div>
</div>
</html>

[可先修改部分代* 再运行查看效果]

关闭窗口

打印文档

附件：