欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單

 更新時(shí)間：2022年02月23日 11:27:55   投稿：lijiao  
這篇文章主要介紹了javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例介紹了javascript結(jié)合HTML CSS實(shí)現(xiàn)橙色導(dǎo)航菜單，分享給大家供大家參考，具體內(nèi)容如下

效果圖：

<html >
<head>
 <title>超漂亮的HTML導(dǎo)航菜單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>網(wǎng)頁制作</span></a></li>
     <li><a href="#"><span>網(wǎng)絡(luò)編程</span></a></li>
     <li><a href="#"><span>平面設(shè)計(jì)</span></a></li>
     <li><a href="#"><span>操作系統(tǒng)</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>

希望對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • js使用eval解析json(js中使用json)

    js使用eval解析json(js中使用json)

    eval的用法eval函數(shù)接收一個(gè)參數(shù)s，如果s不是字符串，則直接返回s。否則執(zhí)行s語句,下面給出eval解析json的示例
    2014-01-01
  • 詳解JavaScript?(!!)?中的雙感嘆號(hào)是干什么用的

    詳解JavaScript?(!!)?中的雙感嘆號(hào)是干什么用的

    JavaScript?不是靜態(tài)語言，而是動(dòng)態(tài)語言，這意味著變量可以引用或保存任何類型的值，此外，該類型可以隨時(shí)更改，這篇文章主要介紹了JavaScript?(!!)?中的雙感嘆號(hào)作用,需要的朋友可以參考下
    2022-09-09
  • ECMAScript6中Set/WeakSet詳解

    ECMAScript6中Set/WeakSet詳解

    這篇文章主要介紹了ECMAScript6中Set/WeakSet詳解的相關(guān)資料,需要的朋友可以參考下
    2015-06-06
  • JavaScript的變量聲明提升問題淺析(Hoisting)

    JavaScript的變量聲明提升問題淺析(Hoisting)

    大家應(yīng)該都只奧javascript的變量聲明具有hoisting機(jī)制，JavaScript引擎在執(zhí)行的時(shí)候，會(huì)把所有變量的聲明都提升到當(dāng)前作用域的最前面。網(wǎng)上關(guān)于JavaScript的變量聲明提升問題的文章有很多，這篇文章將再次談?wù)勱P(guān)于這方面的問題，有需要的朋友們可以參考借鑒。
    2016-11-11
  • javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)

    javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)

    這篇文章主要介紹了javascript 取小數(shù)點(diǎn)后幾位幾種方法總結(jié)的相關(guān)資料,這里提供了四種方法，幫助大家整理，需要的朋友可以參考下
    2017-08-08
  • 淺談javascript的閉包

    淺談javascript的閉包

    本文介紹了javascript閉包的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
    2017-01-01
  • javascript中異常處理案例(推薦)

    javascript中異常處理案例(推薦)

    下面小編就為大家?guī)硪黄猨avascript中異常處理案例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • 代碼詳解JS操作剪貼板

    代碼詳解JS操作剪貼板

    本篇文章給大家介紹了如何用JS操作剪貼板的功能，并把實(shí)例代碼做了分享，需要的朋友學(xué)習(xí)下吧。
    2018-02-02
  • javascript中使用class和prototype的區(qū)別小結(jié)

    javascript中使用class和prototype的區(qū)別小結(jié)

    本文將介紹在JavaScript何時(shí)使用class以及何時(shí)使用prototype,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-08-08
  • javascript 程序庫的比較（一）之DOM功能

    javascript 程序庫的比較（一）之DOM功能

    javascript 程序庫的比較（一）之DOM功能
    2010-04-04

最新評論