代码
<!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>模仿微软CSS滑动门，CodeFans.net</title>
<style type="text/css">
body { margin:0; padding:0; text-align:center; font-family:arial, sans-serif; font-size:12px }
p { padding:0; margin:0; line-height:1.5em }
#wrap { border:1px solid #A2A7AB; margin:0px auto; padding:0px; text-align:left; width:500px; height:229px; background:#fff; }
#menu { float:left; width:202px; height:229px; background:url(images/left_bg.jpg) no-repeat right center }
#menu ul { list-style:none; margin:0; padding:30px 0px 0px 0px; }
#menu li { height:25px; line-height:31px; text-align:right }
#menu a { color:#000; text-decoration:none; display:block; padding-right:25px }
#menu a:hover, #menu .on a { background:url(images/dangqian_li.jpg) no-repeat right center; color:#039 }
#content { float:right; width:296px; }
#content a { color:#0099ff; text-decoration:none; display:block; padding-right:25px; text-decoration:underline; }
#content a:hover { color:#FF6600; }
#content h1 { font-size:12px; font-weight:bold; margin:0; padding:5px 0px 0px 5px; margin-bottom:4px }
#content h2 { font-size:12px; font-weight:normal; margin:0; padding:15px 0px 0px 5px; margin-bottom:6px }
#content ul { list-style:none; margin:0; padding:0 0 0 20px; }
#content li { padding:2px; background:url(images/arrow_list.jpg) no-repeat left center; text-indent:15px; }
#copy { clear:both }
</style>
<script type="text/javascript">
<!--
//切换到相关页
function gopage(n){
var tag = document.getElementById("menu").getElementsByTagName("li");
var taglength = tag.length;
for (i=1;i<=taglength;i++){
document.getElementById("m"+i).className="";
document.getElementById("c"+i).style.display='none';
}
document.getElementById("m"+n).className="on";
document.getElementById("c"+n).style.display='';
}
//-->
</script>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">期货新人</a></li>
<li id="m2"><a href="#" onmouseover="javascript:gopage(2)">有经验的期货投资者</a></li>
<li id="m3"><a href="#" onmouseover="javascript:gopage(3)">资深投资者期货炒手</a></li>
</ul>
</div>
<div id="content">
<div id="c1">
<h1>您应至少符合下面其中一条的条件</h1>
<ul>
<li>对期货交易规则有一定的了解</li>
<li>未进行过期货交易</li>
<li>熟悉证券交易流程</li>
</ul>
<h2>如果您想进一步了解期货交易方面的知识，
可以参考下面的网址</h2>
<ul>
<li><a href="http://www.shfe.com.cn" target="_blank">上海期货交易所</a></li>
<li><a href="http://www.dce.com.cn" target="_blank">大连商品交易所</a></li>
<li><a href="http://www.czce.com.cn/" target="_blank">郑州商品交易所</a></li>
<li><a href="http://www.cffex.com.cn/" target="_blank">中国金融期货交易所</a></li>
</ul>
</div>
<div id="c2" style="display:none">
<h1>您应至少符合下面其中一条的条件</h1>
<ul>
<li>熟悉期货交易规则</li>
<li>之前行过期货交易</li>
<li>平均每日交易不超过10次</li>
</ul>
</div>
<div id="c3" style="display:none">
<h1>您应至少符合下面其中一条的条件</h1>
<ul>
<li>专职从事期货交易</li>
<li>平均每日交易超过10次</li>
</ul>
</div>
</div>
</div>
</body>
</html>
用到的图片
