首页  ·  知识 ·  前端
仿门户网站的双排导航菜单
网友    综合  编辑:德仔   图片来源:网络
lt;!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot; http://www.w3.org/TR/xh
<!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>
<title>中国站长天空-网页特效-导航菜单-仿门户网站的双排导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<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>
<!--把下面代码加到<body>与</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>
</body>
</html>
本文作者:网友 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读