<!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>
* {margin:0;padding:0;font-size: 12px;}
body{background:#2b2b37;}
.clear{height:0;display:none;font-size:0;clear:both;zoom:1;overflow:hidden;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
.z_com {margin:16px auto;width:900px;position:relative;background:url(../images/menu_bg.gif) repeat-x 0 0;height:67px;}
.z_vis {line-height:26px;color:#ccc;display:none;position:absolute;top:41px;z-index:0;width:658px;padding:0 120px;left:0;text-align:left;border:1px solid #04458f;border-top:0;}
.z_vis a{color:#bfbfbf;}
.z_com ul{height:41px;position:absolute;top:0;left:0;z-index:999;width:660px;margin-left:120px;}
.z_com li {float:left;display:inline;height:41px;line-height:41px;width:110px;text-align:center;overflow:hidden;}
.z_com li a {display:block;background:url(../images/menu_abg.gif) no-repeat 0 0;color:#e98e1b;text-decoration:none;height:41px;overflow:hidden;}
.z_com li a span{color:#a5a5b1;display:block;margin-top:-30px; font-family:Geneva, Arial, Helvetica, sans-serif;font-size:9px;}
.z_com li a:hover{color:#fff;background:url(../images/menu_mselectbg.gif) no-repeat 0 0;left:0;}
.z_com li a:hover span{color:#6afdff;}
.z_com .zselect a,.z_com .zselect a:hover{color:#fff;background:url(../images/menu_selectbg.gif) no-repeat 0 0;left:0;}
.z_com .zselect a span,.z_com .zselect a:hover span{color:#6afdff;}
</style>
</head>
<body>
<script type="text/javascript">
function menus(n,m,v,t)
{
for(i=1;i<=m;i++)
{
document.getElementById(v + i).style.display="none";
document.getElementById(t + i).className="";
}
document.getElementById(v + n).style.display="block";
document.getElementById(t + n).className="zselect";
}
</script>
<div class="z_com">
<ul class="clearfix">
<li id="t_1" onclick="menus(1,6,'v_','t_')" class="zselect"><a href="#">首页<span>HOME</span></a></li>
<li id="t_2" onclick="menus(2,6,'v_','t_')"><a href="#">我的日记<span>DIARY</span></a></li>
<li id="t_3" onclick="menus(3,6,'v_','t_')"><a href="#">我的视频<span>VIDEO</span></a></li>
<li id="t_4" onclick="menus(4,6,'v_','t_')"><a href="#">我的图片<span>PICTRUE</span></a></li>
<li id="t_5" onclick="menus(5,6,'v_','t_')"><a href="#">我的作品<span>WORK</span></a></li>
<li id="t_6" onclick="menus(6,6,'v_','t_')"><a href="#">联系我<span>CONTACT</span></a></li>
</ul>
<span id="v_1" class="z_vis" style="display:block;"> <a href="#">小栏目1</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> </span>
<span id="v_2" class="z_vis"> <a href="#">美文</a> | <a href="#">随记</a> | <a href="#">学习</a></span>
<span id="v_3" class="z_vis"> <a href="#">小栏目3</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> </span>
<span id="v_4" class="z_vis"> <a href="#">小栏目4</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> </span>
<span id="v_5" class="z_vis"> <a href="#">小栏目5</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> </span>
<span id="v_6" class="z_vis"> <a href="#">小栏目6</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> | <a href="#">小栏目</a> </span>
</div>
</body>
</html>
- 1
- 2
前往页