一个CSS写的带标号的文章列表

时间：2013-09-03 16:39 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<title>CSS文章列表</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:440px;margin:40px auto;}
/* ranklist */
.ranklist{border:solid 1px #ddd;padding:10px 10px 0 10px;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url() no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>
<div class="demo">
	<div class="ranklist">
		<ol>
			<li class="top"><em>01</em><p><a href="#" title="">jquery 图片滚动 xslider 插件</a></p><span class="num">56下载</span></li>
			<li class="top"><em>02</em><p><a href="#" title="">jquery tab选项卡插件</a></p><span class="num">12下载</span></li>
			<li class="top"><em>03</em><p><a href="#" title="">jquery 滚动 kxbdSuperMarquee插件</a></p><span class="num">19下载</span></li>
			<li><em>04</em><p><a href="#" title="">jquery 文字滚动大全</a></p><span class="num">88下载</span></li>
			<li><em>05</em><p><a href="#" title="">jquery 图片切换插件</a></p><span class="num">30下载</span></li>
			<li><em>06</em><p><a href="#" title="">jquery 表格插件:Tablesorter 2.0 </a></p><span class="num">55下载</span></li>
		</ol>
		<div class="clear"></div>
	</div>
</div>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一个CSS写的带标号的文章列表,CSS实现的文章列表.在兼容性方面，兼容各大主流浏览器，运行本代码可看到列表效果。每行列表包括：序号、文章标题、时间或其它信息，标号是使用CSS调用一张图片来显示，会自己处理的就弄张漂亮的序号图片。一个CSS写的带标号的文章列表由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/5531.html

标签：网站源码