1 2 3 4 超漂亮的HTML导航菜单CSS代码 - 何问起 5 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 189 190 191 192 193
查看更多关于HTML+CSS代码橙色导航菜单_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110975