你的位置:首页 > 网页设计

[网页设计]HTML+CSS代码橙色导航菜单


效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm

 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4   <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title> 5   <style> 6     #top { 7       display: block; 8       text-align: left; 9       height: 105px; 10       position: relative; 11       z-index: 0; 12     } 13  14     .m { 15       margin: 0 auto; 16       width: 970px; 17     } 18  19     body { 20       font-size: 12px; 21     } 22  23     a { 24       color: #333; 25       text-decoration: none; 26     } 27  28       a:link { 29         text-decoration: none; 30       } 31       /* Download by http://hovertree.com*/ 32       a.blue:link, a.blue:visited { 33         color: #014cc9; 34         text-decoration: none; 35       } 36  37       a.blue:hover, a.blue:active { 38         color: #014cc9; 39         text-decoration: underline; 40       } 41  42       a.org:link, a.org:visited { 43         color: #ff4e00; 44         text-decoration: none; 45       } 46  47       a:hover, a:active, a.org:hover, a.org:active { 48         color: #ff4e00; 49         text-decoration: underline; 50       } 51  52     #navpart { 53       background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top; 54       height: 105px; 55       width: 950px; 56       z-index: 0; 57       margin-top: 0; 58       margin-right: auto; 59       margin-bottom: 0; 60       margin-left: auto; 61       clear: both; 62       position: relative; 63     } 64  65       #navpart .sideleft { 66         background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom; 67         float: left; 68         height: 105px; 69         width: 6px; 70       } 71  72       #navpart .sideright { 73         background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom; 74         float: right; 75         height: 105px; 76         width: 6px; 77       } 78  79     #navmenubar { 80       height: 32px; 81       float: left; 82       display: inline; 83       margin: 0 -6px; 84       width: 100%; 85       position: relative; 86       z-index: 3; 87       top: 0; 88     } 89  90     #hot { 91       background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top; 92       height: 21px; 93       width: 19px; 94       position: absolute; 95       top: -5px; 96       right: 2px; 97       z-index: 666; 98       background:black; 99     }100 101     #navmenubar .sideleft {102       background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;103       float: left;104       height: 32px;105       width: 6px;106       display: inline;107       margin: 0 0 0 8px;108     }109 110     #navmenubar .sideright {111       background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;112       float: left;113       height: 32px;114       width: 6px;115       display: inline;116       margin: 0 4px 0 -2px;117     }118     /* NAVMENU */119     #navmenubar .navmenu {120       background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;121       height: 32px;122       padding: 0;123       margin: 0;124       float: left;125       display: inline;126     }127 128       #navmenubar .navmenu li {129         float: left;130         white-space: nowrap;131         margin: 0px;132         padding: 0px;133         display: inline;134       }135 136         #navmenubar .navmenu li a {137           background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;138           width: 80px;139           padding: 7px 2px 5px 0;140           float: left;141           line-height: 20px;142           height: 20px;143           text-align: center;144         }145 146           #navmenubar .navmenu li a:hover {147             background-position: 0 -32px;148             color: #602800;149             text-decoration: none;150             padding: 8px 2px 4px 0;151           }152 153       #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {154         background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;155         font-weight: 600;156         color: #FFF;157         font-size: 14px;158         padding: 7px 2px 5px 0;159       }160 161     #top #navpart .content {162       margin-top: 40px;163       margin-right: auto;164       margin-bottom: 0px;165       margin-left: auto;166       width: 900px;167       height: auto;168       color: white;169     }170 171       #top #navpart .content a {172         color: white;173         display: inline-block;174         margin-top: 0px;175         height: 30px;176         border: 0px solid white;177         line-height: 30px;178         padding: 10px;179       }180 181     .clear {182       clear: both;183       display: block;184       font: 0px/0 sans-serif;185       height: 0px;186       overflow: hidden;187     }188   </style>189 190 </head>191 <body>192   <div id="top" class="m">193     <div id="navpart">194       <div class="sideleft"></div>195       <div class="sideright"></div>196       <!--NavMenu-->197       <div id="navmenubar">198         <div class="sideleft"></div>199         <ul class="navmenu">200           <li class="current"><a href="http://hovertree.com" target="_top" title="首页">何问起</a></li>201           <li><a href="http://hovertree.com/"><span>编程资源</span></a></li>202           <li><a href="http://hovertree.com"><span>高质量源码</span></a></li>203         </ul>204         <div class="sideright"></div>205         <div class="sideleft"></div>206         <ul class="navmenu">207           <li><a href="http://tool.hovertree.com"><span>工具</span></a></li>208           <li><a href="http://hovertree.com/code/"><span>代码</span></a></li>209           <li><a href="http://keleyi.com"><span>jQuery教程</span></a></li>210           <li><a href="http://hovertree.com/tiku/"><span>在线题库</span></a></li>211         </ul>212         <div class="sideright"></div>213         <div>214           <div class="content">215             <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS运算符优先级</a>216 <a href="http://hovertree.com/code/texiao/ks63r6aq.htm" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正则表达式</a>217 <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS风格</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js实现异步循环</a>218 219           </div>220         </div>221       </div>222     </div>223   </div>224   <div class="clear"></div>225 </body>226 </html>227 228             

 网页特效:http://www.cnblogs.com/roucheng/p/texiao.html