div+css教程TOP排行榜或新闻列表最标准div css样式表代码写法
摘要：div+css教程TOP排行榜或新闻列表最标准div css样式表代码写法,支持IE6,7,8和火狐和谷歌,通用的样式，支持在线浏览，在线复制，复制之后立马能运行
html代码
运行代码
<!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=utf-8" />
<title>div+css教程TOP排行榜或新闻列表最标准div css样式表代码写法-web开发</title>
</head>
<body>
<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:640px;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(http://www.webkfa.com/lzimg/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><p><a href="http://www.webkfa.com" title="ie6 png 透明的解决方法">ie6 png 透明的解决方法</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em>02</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
<li class="top">
<em>03</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
<li>
<em>04</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
<li>
<em>04</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
<li>
<em>04</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
<li>
<em>04</em><p><a href="http://www.webkfa.com" title="css写好看的白色网页文字">css写好看的白色网页文字</a></p><span class="num">32万下载</span>
</li>
</ol>
<div class="clear"></div>
</div>
</div>
<center>
<p><strong><a href="http://www.webkfa.com" style="color:#FF9900" target="_blank">web开发</a>网站整理</strong> </p>
<p>欢迎大家进群讨论web开发知识！</p>
<p>来源于:webkfa</p>
</center>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢