仿YAHOO的一个小效果下拉效果

386 阅读 0 评论 255 点赞

我是靠谱客的博主迅速时光，这篇文章主要介绍仿YAHOO的一个小效果下拉效果，现在分享给大家，希望可以做个参考。

<!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=gb2312" /> 
<title>隐藏/显示层</title> 
<style type="text/css"> 
<!-- 
body{ 
    background: #FFF; 
    color: #000; 
    font: normal 12px 宋体,arial,sans-serif; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
}

div,form,ul,ol,li,span,p { 
    border: 0; 
    margin: 0; 
    padding: 0; 
}

/*清除float*/ 
.clear{ 
    clear: both; 
    font-size: 1px; 
    visibility: hidden; 
}

/*分类标题*/ 
.class_title{ 
    margin: 0 auto; 
    width: 504px; 
    height: 17px; 
    border: 1px solid #9EB1C0; 
    padding: 1px; 
    background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif); 
}

.class_title h2{ 
    margin: 0; 
    padding: 2px 0 2px 18px; 
    height: 12px; 
    color: #16387C; 
    font: bold 13px 宋体,arial,sans-serif; 
    cursor:pointer; 
    letter-spacing: 2px; 
    text-align: left; 
}

#tabclass1{ 
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat; 
}

/*分类列表（模块一）*/ 
#class_cnt1{ 
    background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x; 
    border: solid #9EB1C0; 
    border-width: 0 1px 1px 1px; 
    height: 287px; 
    margin: 0 auto; 
    text-align: left; 
    width: 506px; 
    display: block; 
  overflow:hidden; 
}

#class_cnt1 p{ 
   margin:0; 
   padding:3px; 
   line-height:150%; 
} 
--> 
</style>

</head> 
<body> 
    <div class="class_title"> 
         <h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>          
    </div>          
    <div id="class_cnt1"> 
    <p> 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    1111111
 
    111111111
 
    111111111
 
    </p> 
    </div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]