大家好,又见面了,我是全栈君
效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm
1 <!DOCTYPE html>
2 <html xmlns="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
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120663.html原文链接:https://javaforall.cn