Div+Css实例：用CSS制作的热门内容排行效果--瀚海软件评论--Power By JYcms!

当前位置：首页 » 软件秘技 » 多媒体类 » Div+Css实例：用CSS制作的热门内容排行效果

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

作者:will2011 更新时间:2008/12/26 10:50:20 来源:中国IT人才网【字号: 大中小】本条信息浏览人次共有次

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

Source Code to Run

<!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=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://www.51itrencai.com/programming/">更多>></a>热门文章排行</h2>
	<div class="hot_news">
		<ul class="news_list">
			 <li class="top3"><em>1</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=160">用CSS实现中英文双语导航菜单</a></li>
			 <li class="top3"><em>2</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=168">程序员是“工人”还是“白领”</a></li>
			 <li class="top3"><em>3</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=181">一个简单的滑动门效果</a></li>
			 <li><em>4</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=184">程序开发团队之团队精神篇</a></li>
			 <li><em>5</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=180">asp中判断函数总结</a></li>
			 <li><em>6</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=192">成功站长10个必备要点</a></li>
			 <li><em>7</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=192">10个SEO常用查询指令</a></li>
			 <li><em>8</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=169">用CSS实现中英文双语导航菜单</a></li>
			 <li><em>9</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=173">功能比界面重要</a></li>
			 <li><em>10</em><a href="http://www.51itrencai.com/Programming/Info.asp?infoid=171">放松一下—站长版《死性不改》</a></li>
		 </ul>
	</div>
</div>
</html>

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

【关闭窗口】【我要打印】

【免责声明：本站所发表的文章，大部分来源于各相关媒体或者网络，内容仅供参阅，与本站立场无关。如有不符合事实，或影响到您利益的文章，请及时告知，本站立即删除。谢谢监督。】

发表评论

* 评论内容：

* 您的大名：	* 您的email：
* 验证码： *请输入4位数的验证码

发表评论须知：一、所发文章必须遵守《互联网电子公告服务管理规定》；二、严禁发布供求代理信息、公司介绍、产品信息等广告宣传信息；三、严禁恶意重复发帖；四、严禁对个人、实体、民族、国家等进行漫骂、污蔑、诽谤。