信鸽网

javascript HTML+CSS实现经典橙色导航菜单

  作者：bea

本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下 效果图： <html ><head> <title>超漂亮的HTML导航菜单CSS代码</title> <style> #top { display: block; text-align: left; height: 105px; position: relative; z-inde

本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下


效果图：





<html >

<head>

 <title>超漂亮的HTML导航菜单CSS代码</title>

 <style>

  #top {

   display: block;

   text-align: left;

   height: 105px;

   position: relative;

   z-index: 0;

  }

 

  .m {

   margin: 0 auto;

   width: 970px;

  }

 

  body {

   font-size: 12px;

  }

 

  a {

   color: #333;

   text-decoration: none;

  }

 

   a:link {

    text-decoration: none;

   }

   /* Download by http://hovertree.com*/

   a.blue:link, a.blue:visited {

    color: #014cc9;

    text-decoration: none;

   }

 

   a.blue:hover, a.blue:active {

    color: #014cc9;

    text-decoration: underline;

   }

 

   a.org:link, a.org:visited {

    color: #ff4e00;

    text-decoration: none;

   }

 

   a:hover, a:active, a.org:hover, a.org:active {

    color: #ff4e00;

    text-decoration: underline;

   }

 

  #navpart {

   background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;

   height: 105px;

   width: 950px;

   z-index: 0;

   margin-top: 0;

   margin-right: auto;

   margin-bottom: 0;

   margin-left: auto;

   clear: both;

   position: relative;

  }

 

   #navpart .sideleft {

    background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;

    float: left;

    height: 105px;

    width: 6px;

   }

 

   #navpart .sideright {

    background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;

    float: right;

    height: 105px;

    width: 6px;

   }

 

  #navmenubar {

   height: 32px;

   float: left;

   display: inline;

   margin: 0 -6px;

   width: 100%;

   position: relative;

   z-index: 3;

   top: 0;

  }

 

  #hot {

   background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;

   height: 21px;

   width: 19px;

   position: absolute;

   top: -5px;

   right: 2px;

   z-index: 666;

   background:black;

  }

 

  #navmenubar .sideleft {

   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;

   float: left;

   height: 32px;

   width: 6px;

   display: inline;

   margin: 0 0 0 8px;

  }

 

  #navmenubar .sideright {

   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;

   float: left;

   height: 32px;

   width: 6px;

   display: inline;

   margin: 0 4px 0 -2px;

  }

  /* NAVMENU */

  #navmenubar .navmenu {

   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;

   height: 32px;

   padding: 0;

   margin: 0;

   float: left;

   display: inline;

  }

 

   #navmenubar .navmenu li {

    float: left;

    white-space: nowrap;

    margin: 0px;

    padding: 0px;

    display: inline;

   }

 

    #navmenubar .navmenu li a {

     background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;

     width: 80px;

     padding: 7px 2px 5px 0;

     float: left;

     line-height: 20px;

     height: 20px;

     text-align: center;

    }

 

     #navmenubar .navmenu li a:hover {

      background-position: 0 -32px;

      color: #602800;

      text-decoration: none;

      padding: 8px 2px 4px 0;

     }

 

   #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {

    background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;

    font-weight: 600;

    color: #FFF;

    font-size: 14px;

    padding: 7px 2px 5px 0;

   }

 

  #top #navpart .content {

   margin-top: 40px;

   margin-right: auto;

   margin-bottom: 0px;

   margin-left: auto;

   width: 900px;

   height: auto;

   color: white;

  }

 

   #top #navpart .content a {

    color: white;

    display: inline-block;

    margin-top: 0px;

    height: 30px;

    border: 0px solid white;

    line-height: 30px;

    padding: 10px;

   }

 

  .clear {

   clear: both;

   display: block;

   font: 0px/0 sans-serif;

   height: 0px;

   overflow: hidden;

  }

 </style>

 

</head>

<body>

 <div id="top" class="m">

  <div id="navpart">

   <div class="sideleft"></div>

   <div class="sideright"></div>

   <!--NavMenu-->

   <div id="navmenubar">

    <div class="sideleft"></div>

    <ul class="navmenu">

     <li class="current"><a href="#" target="_top" title="首页">脚本之家</a></li>

     <li><a href="#"><span>编程资源</span></a></li>

     <li><a href="#"><span>在新手册</span></a></li>

    </ul>

    <div class="sideright"></div>

    <div class="sideleft"></div>

    <ul class="navmenu">

     <li><a href="#"><span>网页制作</span></a></li>

     <li><a href="#"><span>网络编程</span></a></li>

     <li><a href="#"><span>平面设计</span></a></li>

     <li><a href="#"><span>操作系统</span></a></li>

    </ul>

    <div class="sideright"></div>

    <div>

     <div class="content">

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

       <a href="#" target="_blank">特效代码</a>

     </div>

    </div>

   </div>

  </div>

 </div>

 <div class="clear"></div>

</body>

</html>


希望对大家学习javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: