新闻列表div css最标准写法代码,Css代码库,德仔网

代码语言

代码分类

【Css】新闻列表div css最标准写法

作者:Dezai.CN / 发布于2013/7/23/ 808


	<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(images/mun.gif) 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><a href="#" title="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动">jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动</a><span class="num">32万下载</span>
	 </li>
	 <li class="top">
	 <em>02</em><a href="#" title="jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能">jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能</a><span class="num">32万下载</span>
	 </li>
	 <li class="top">
	 <em>03</em><a href="#" title="jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a><span class="num">32万下载</span>
	 </li>
	 <li>
	 <em>04</em><a href="#" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a><span class="num">32万下载</span>
	 </li>
	 <li>
	 <em>05</em><a href="#" title="jquery 图片切换插件制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件">jquery 图片切换插件制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件</a><span class="num">32万下载</span>
	 </li>
	 <li>
	 <em>06</em><a href="#" title="jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选">jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选</a><span class="num">32万下载</span>
	 </li>
	 </ol>
	 <div class="clear"></div>
	</div>
	
	</div>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　新闻列表　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)