滑动展开层

来源：互联网发布：ubuntu 14.04 镜像源编辑：程序博客网时间：2024/05/22 01:47

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>滑动展开层</title><STYLE> body { background-color: #EEEEEE; margin: 0px; text-align: center; } #wrap { width: 736px; background-color: #FFFFFF; overflow: hidden; margin: 12px; padding: 12px; } #topcontainer { height: 80px; width: 732px; background-color: #99FF66; border: 1px solid #79F200; } #bodycontainer { height: 400px; width: 100%; margin-top: 12px; } #bottomcontainer { height: 60px; width: 100%; margin-top: 12px; } #topwrap { width: 100%; } #leftcontainer { background-color: #99FF66; height: 400px; width: 120px; float: left; border: 1px solid #79F200;}input { background-color: #99FF66; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #79F200; border-right-color: #79F200; border-bottom-color: #79F200; border-left-color: #79F200; line-height: 28px; background-position: center; height: 30px;}</STYLE></head><body><br /><div id="wrap"> <div align="left" style="margin-bottom:3px" mce_style="margin-bottom:3px"> <input type="button" id="showtop" onclick="topslider.show();this.style.display='none';document.getElementById('hidetop').style.display='';" value="展开顶部"/> <input type="button" id="hidetop" value="关闭顶部" onclick="topslider.hide();this.style.display='none';document.getElementById('showtop').style.display='';" style="display:none" mce_style="display:none"/> </div> <div id="topwrap"> <div id="topcontainer" style="display:none" mce_style="display:none"></div> </div> <div id="bodycontainer"> <div id="leftcontainer" style="display:none" mce_style="display:none"><br /> <br /> <br /> </div> <div align="left"> <input type="button" id="showleft" value="展开左侧" onclick="leftslider.show();this.style.display='none';document.getElementById('hideleft').style.display='';"/> <input type="button" id="hideleft" value="关闭左侧" onclick="leftslider.hide();this.style.display='none';document.getElementById('showleft').style.display='';" style="display:none" mce_style="display:none"/> </div> </div> <div id="bottomcontainer"></div></div><mce:script language="JavaScript" type="text/javascript"></mce:script></body></html>