来自百度百科的目录显示/隐藏效果

最新推荐文章于 2022-12-22 10:31:01 发布

weixin_34220834

最新推荐文章于 2022-12-22 10:31:01 发布

阅读量110

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/06/27/2091090.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>
<title>来自百度百科的目录显示/隐藏效果_网页代码站(www.webdm.cn)</title>
<style type="text/css">
 /* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
p{line-height:24px;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#3366cc;}
a:hover{color:#ef9b11;  }
.text_dir {
	BORDER-RIGHT: #dedfe1 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #dedfe1 1px solid; DISPLAY: inline; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 

0px;BORDER-LEFT: #dedfe1 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #dedfe1 1px solid; POSITION: relative; left:35%;; margin:20px auto;}
.text_dir P {
	PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 12px 0px 4px; LINE-HEIGHT: 30px; PADDING-TOP: 0px
}
.text_dir P SPAN {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; MARGIN-LEFT: 5px; COLOR: #36c
}
.text_dir DL {
	PADDING-RIGHT: 20px; PADDING-LEFT: 15px; BACKGROUND: #fff; PADDING-BOTTOM: 20px; PADDING-TOP: 0px
}
.text_dir DD {
	PADDING-LEFT: 12px; BACKGROUND: url(http://www.webdm.cn/images/20100920/bgs3.gif) no-repeat 2px -327px; LINE-HEIGHT: 20px; POSITION: relative
}
.text_dir OL {
	PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; FILTER: Alpha(Opacity=10); PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; TEXT-INDENT: 20px; PADDING-TOP: 

0px; LIST-STYLE-TYPE: none; opacity: .1
}
.text_dir DL.arr {
	BACKGROUND: url(http://www.webdm.cn/images/20100920/word_arr.gif) #fff no-repeat right bottom
}
.text_dir #holder2 {
	BORDER-RIGHT: #dedfe1 1px solid; BORDER-TOP: #dedfe1 1px; DISPLAY: none; LEFT: -1px; BORDER-LEFT: #dedfe1 1px solid; BORDER-BOTTOM: #dedfe1 1px solid; POSITION: 

absolute; TOP: 47px
}
.text_dir .temp {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
}
.text_dir .data LI {
	PADDING-LEFT: 12px; BACKGROUND: url(http://www.webdm.cn/images/20100920/bgs3.gif) #fff no-repeat 2px -327px; ZOOM: 1
}
.text_dir .data LI LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}

   
</style>
<script src="http://www.webdm.cn/images/20100920/tangram-1.1.0.js" type="text/javascript"></script>
<script src="http://www.webdm.cn/images/20100920/base.js" type="text/javascript"></script>
</head>

<body>

<div id="wrap">
	<fieldset class="text_dir" id="catalog">
	<p>麦田圈 maitianquan.com <span>[<a href="javascript:void(0)" id="dir_alt" onClick="lemma.catalog.showCatalog();">隐藏</a>]</span></p>
	<dl id="holder1">
	<dd><a href="#">麦田圈简介</a></dd>
	<dd><a href="#">形成原因</a><ol><li><a href="#">一是磁场说。</a></li><li><a href="#">二是龙卷风说。</a></li><li><a href="#">三是外星制造说。</a></li><li><a 

href="#">四是异端说。 </a></li><li><a href="#">五是流传较为广泛的说法是人造说。</a></li></ol></dd>
	<dd><a href="#">麦田圈的资料及历史</a>
	  <ol><li><a href="#">水母形状的“麦田怪圈”</a></li><li><a href="#">麦田圈之谜破解</a></li><li><a href="#">麦田怪圈是种行为艺术？</a></li><li><a href="#">麦田怪圈

成因又有新说法</a></li><li><a href="#">麦田怪圈惊现英国</a></li><li><a href="#">神秘标志</a></li></ol>
	</dd>
	<dd><a href="#">麦田圈的特征</a>
	  <ol><li><a href="#">人工制造麦田怪圈赏</a></li><li><a href="#">非人造麦田圈的十大特征</a></li><li><a href="#">白鸦行动</a></li><li><a href="#">麦田怪圈的猜想

</a></li><li><a href="#">神秘的麦田怪圈</a></li><li><a href="#">破解麦田圈之谜破解</a></li><li><a href="#">英国出现凤凰涅磐状麦田怪圈</a></li><li><a href="#">麦田圈究竟来

自何方？</a>	</li></ol>
	</dd>
	</dl>
	<dl id="holder2"></dl>
	</fieldset>
	<script type="text/javascript">lemma.catalog.start();</script>
</div>
<p></p>
</center>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/d24f9189-55e8-40c1-8a8a-dcb39aba0315.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/27/2091090.html