本文實例介紹了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程序設計有所幫助。
新聞熱點
疑難解答
