溜溜show-内容列表排行效果(JS+DIV)

内容列表排行效果(JS+DIV)

huang 发表时间:2009-04-16 13:01:40 分类:WEB标准浏览( ) 评论( ) 收藏日志

添加到网摘：

内容列表排行效果(JS+DIV)

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> \n
<html xmlns="http://www.w3.org/1999/xhtml"> \n
<head> \n
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> \n
<title></title> \n
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen" /> \n
<style type="text/css"> \n
*{ margin:0; padding:0; font:normal 12px 宋体;} \n
.wrapper{ position:absolute; left:20%; top:20%; width:300px; border:1px solid #fdd78d; background:#ffecc6; padding:5px;} \n
\n
/*平常的状态*/ \n
dl{ clear:both; margin:5px 0;} \n
dl dt{ display:none;} \n
dl dd{} \n
dl dd strong{ float:left; margin-right:5px;} \n
dl dd div{ float:left; width:270px; list-style-type:none;} \n
dl dd div h4{ clear:both; font-weight:normal} \n
dl dd div h4 a{ float:left; color:#795601; font-size:12px; font-weight:normal; text-decoration:none;} \n
dl dd div h4 a:hover{ color:#f00; text-decoration:underline;} \n
dl dd div h4 span{ float:right; width:75px;} \n
dl dd div p{ display:none;} \n
\n
/*鼠标划过的状态*/ \n
dl.over{ clear:both; height:55px; background:#fdc559; padding:5px;} \n
dl.over dt{ float:right; display:block;} \n
dl.over dt img{ border:1px solid #ccc; padding:1px; background:#fff;} \n
dl.over dd{ float:left;} \n
dl.over dd strong{ font-size:28px; color:#fa3081; vertical-align:top;} \n
dl.over dd div{ float:left; width:195px;} \n
dl.over dd div h4{ clear:both; font-weight:normal} \n
dl.over dd div h4 a{ color:#b34408;} \n
dl.over dd div h4 a:hover{ color:#f00; text-decoration:underline;} \n
dl.over dd div h4 span{ float:right;} \n
dl.over dd div p{ clear:both; display:block; margin-top:5px;} \n
</style> \n
<script language="javascript"> \n
window.onload=function(){ \n
var dl=document.getElementsByTagName("dl"); \n
if(dl.length<1) return false; \n
for(var i=0;i<dl.length;i++){ \n
//初始化，让第一个类为over \n
if(dl[i].className.indexOf("over")==-1){ \n
dl[0].className="over"; \n
} \n
//遍历循环，模拟:hover伪类 \n
dl[i].onmouseover=function(){ \n
for(var j=0;j<dl.length;j++){ \n
dl[j].className=""; \n
} \n
this.className="over"; \n
} \n
} \n
} \n
</script> \n
</head> \n
<body> \n
<div class="wrapper"> \n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>01</strong> \n
<div> \n
<h4><span>人气：19045</span><a href="#">电脑保姆</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>02</strong> \n
<div> \n
<h4><span>人气：34534</span><a href="#">WEB标准</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>03</strong> \n
<div> \n
<h4><span>人气：79789</span><a href="#">建站知识</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>04</strong> \n
<div> \n
<h4><span>人气：4323</span><a href="#">IT学院</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>05</strong> \n
<div> \n
<h4><a href="#">溜溜图片</a><span>人气：6456</span></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>06</strong> \n
<div> \n
<h4><span>人气：433534</span><a href="#">有声读物</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>07</strong> \n
<div> \n
<h4><span>人气：09808</span><a href="#">标签云集</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>08</strong> \n
<div> \n
<h4><span>人气：3565</span><a href="#">给我留言</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>09</strong> \n
<div> \n
<h4><span>人气：1231</span><a href="#">友情链接</a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
\n
<dl> \n
<dt><img src="/Images/Logo.gif" width="52" height="52" /></dt> \n
<dd> \n
<strong>10</strong> \n
<div> \n
<h4><span>人气：19045</span><a href="#">常用素材 </a></h4> \n
<p>有声小说《茅山后裔：第二部》更新到155集(大结局)</p> \n
</div> \n
</dd> \n
</dl> \n
</div> \n
</body> \n
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]