双排导航
作者:cmscn 日期:2010-01-10
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
<!--
a:link, a:visited { color: #0F0CBF; }
a:hover { color: #F00; text-decoration: underline; }
body { background-color: #FFFFFF; background-position: center; color: #003366; font-family: Arial, "宋体"; font-size: 12px; margin: 0px; padding: 0px; }
img { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; margin: 0px; padding: 0px; }
li { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; list-style-image: none; list-style-type: none; margin: 0px; padding: 0px; }
ul { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; list-style-type: none; margin: 0px; padding: 0px; }
.nav { height: 74px; width: 670px; }
#nav1 .menu, #nav2 .menu { float: left; width: 670px; }
#nav1 .menu_tab, #nav2 .menu_tab { float: left; height: 74px; width: 35px; }
#nav1 .menu .left { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_side.gif); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }
#nav1 .menu .middle { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_bg.gif); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }
#nav1 .menu .right { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_side.gif); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }
#nav1 .menu li a { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_01.gif); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #003366; background-position: 0px 0px;}
#nav1 .menu li a:hover { color: #006699; background-position: 0px -24px; }
#nav1 .menu li, #nav2 .menu li { float: left; margin-bottom: 2px; margin-left: 3px; margin-right: 0px; margin-top: 6px; }
#nav1 .menu ul, #nav2 .menu ul { margin-bottom: 0px; margin-left: 2px; margin-right: 0px; margin-top: 4px; }
#nav2 .menu .left { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_side.gif); background-position: 0px 0px; background-repeat: no-repeat; float: left; height: 74px; width: 5px; }
#nav2 .menu .middle { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_bg.gif); background-repeat: repeat-x; float: left; height: 74px; width: 933px; }
#nav2 .menu .right { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_side.gif); background-position: -5px 0px; background-repeat: no-repeat; float: right; height: 74px; width: 7px; }
#nav2 .menu li a { background-image: url(http://www.zzsky.cn/effect/images/200907071130/menu_art_01.gif); height: 24px; width: 68px; line-height: 24px; background-repeat: no-repeat; float: left; text-align: center; text-decoration: none; color: #666666; background-position: 0px 0px; }
#nav2 .menu li a:hover { color: #000000; background-position: 0px -24px; }
-->
</style>
<script type="text/javascript">
function area_nav(index){
for(var i=1;i<=2;i++)
{
if( document.getElementById("nav"+i.toString()) != null )
{
document.getElementById("nav"+i.toString()).style.display = 'none';
}
}
document.getElementById("nav"+index.toString()).style.display = 'block';
}
</script>
</head>
<body>
<div id="nav1" class="nav">
<div class="menu">
<div class="middle" style="width: 670px; height: 74px">
<ul>
<li>
<a href="#" target="_top"><b style="color:#FF0000">积分充值</b></a>
</li>
<li>
<a href="#" target="_top">柳州论坛</a>
</li>
<li>
<a href="#" target="_top">柳州社区</a>
</li>
<li>
<a href="#" target="_top">柳州论坛</a>
</li>
<li>
<a href="#" target="_top">交易买卖</a>
</li>
<li>
<a href="#" target="_blank"><b style="color:#FF0000">社区家园</b></a>
</li>
<li>
<a href="#" target="_top">网址大全</a>
</li>
<li>
<a href="#" target="_top">柳州论坛</a>
</li>
<li>
<a href="#" target="_top">勋章中心</a>
</li>
<li>
<a href="#" target="_top">新人报道</a>
</li>
<li>
<a href="#" target="_top">柳州论坛</a>
</li>
<li>
<a href="#" target="_top">好友圈子</a>
</li>
<li>
<a href="#" target="_top"><b style="color:#330099">柳州论坛</b></a>
</li>
<li>
<a href="#" target="_top"><b style="color:#FF0000">VIP会员</b></a>
</li>
<li>
<a href="#" target="_top"><b style="color:#FF0000">柳州论坛</b></a>
</li>
<li>
<a href="" target="_top">广告位置</a>
</li>
<li>
<a href="" target="_top">广告位置</a>
</li>
<li>
<a href="" target="_top">广告位置</a>
</li>
</ul>
</div>
</div>
</div>
评论: 0 | 引用: 0 | 查看次数: 677
发表评论