效果体验:http://keleyi.com/keleyi/phtml/divcss/6.htm

兼容多浏览器,例如IE,Chrome,火狐 等。

完整代码,保存到htm文件打开也可以查看效果:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>20个web2.0导航样式-柯乐义</title>
  6 <link href="http://keleyi.com/keleyi/phtml/divcss/6/navigation.css" rel="stylesheet" type="text/css" />
  7 </head>
  8 <body>
  9 
 10 <!------- 导航1 ------->
 11 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo1.jpg" alt="wenqi's blog" /></div>
 12 <div class="menu1">
 13 <a href="#">Blog</a>
 14 <a href="#">Themes</a>
 15 <a href="#">Service</a>
 16 <a href="#">About</a>
 17 <a href="#">Help</a>
 18 <del></del>
 19 </div>
 20 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo2.jpg" alt="wenqi's blog" /></div>
 21 
 22 <!------- 导航2 ------->
 23 <div class="menu2">
 24 <div class="left2"></div>
 25 <div class="center2">
 26 <a href="#">Blog</a>
 27 <a href="#">Themes</a>
 28 <a href="#">Service</a>
 29 <a href="#">About</a>
 30 <a href="#">Help</a>
 31 <del></del>
 32 </div>
 33 <div class="right2"></div>
 34 <div class="clear"></div>
 35 </div>
 36 
 37 <!------- 导航3 ------->
 38 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo3.jpg" alt="wenqi's blog" /></div>
 39 <div class="menu3">
 40 <div class="left3"></div>
 41 <div class="center3">
 42 <a href="#">Blog</a>
 43 <a href="#">Books</a>
 44 <a href="#">Portfolio</a>
 45 <a href="#">Photos</a>
 46 <a href="#">Service</a>
 47 </div>
 48 <div class="right3"></div>
 49 <div class="clear"></div>
 50 </div>
 51 
 52 <!------- 导航4 ------->
 53 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo4.jpg" alt="WQ's space" /></div>
 54 <div class="menu4">
 55 <a href="#">Blog</a>
 56 <a href="#">Themes</a>
 57 <a href="#">Service</a>
 58 <a href="#">About</a>
 59 <a href="#">Help</a>
 60 <del></del>
 61 </div>
 62 
 63 <!------- 导航4 ------->
 64 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo5.jpg" alt="wenqi's space" /></div>
 65 <div class="menu5">
 66 <a href="#">Blog</a>
 67 <a href="#">Themes</a>
 68 <a href="#">Service</a>
 69 <a href="#">About</a>
 70 <del></del>
 71 </div>
 72 
 73 <!------- 导航6 ------->
 74 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo6.jpg" alt="wenqi's blog" /></div>
 75 <div class="menu6">
 76 <div class="left6"></div>
 77 <div class="center6">
 78 <a href="#">Blog</a><span></span>
 79 <a href="#">Themes</a><span></span>
 80 <a href="#">Service</a><span></span>
 81 <a href="#">About</a><span></span>
 82 <a href="#">Help</a>
 83 </div>
 84 <div class="right6"></div>
 85 <div class="clear"></div>
 86 </div>
 87 
 88 <!------- 导航7 ------->
 89 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo7.jpg" alt="wenqi's blog" /></div>
 90 <div class="menu7">
 91 <div class="left7"></div>
 92 <div class="center7">
 93 <a href="#">Blog</a>
 94 <a href="#">Themes</a>
 95 <a href="#">Service</a>
 96 <a href="#">About</a>
 97 <a href="#">Help</a>
 98 </div>
 99 <div class="right7"></div>
100 <div class="clear"></div>
101 </div>
102 
103 <!------- 导航8 ------->
104 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo8.jpg" alt="wenqi blog" /></div>
105 <div class="menu8">
106 <a href="#">Blog</a>
107 <a href="#">Themes</a>
108 <a href="#">Service</a>
109 <a href="#">About</a>
110 <del></del>
111 </div>
112 
113 <!------- 导航9 ------->
114 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo9.jpg" alt="wenqi blog" /></div>
115 <div class="menu9">
116 <a href="#">Blog</a>
117 <a href="#">Themes</a>
118 <a href="#">Uploads</a>
119 <a href="#">Service</a>
120 <a href="#">About</a>
121 <del></del>
122 </div>
123 
124 <!------- 导航10 ------->
125 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo10.jpg" alt="wenqi's blog" /></div>
126 <div class="menu10">
127 <div class="left10"></div>
128 <div class="center10">
129 <a href="http://keleyi.com">Blog</a>
130 <a href="#">Themes</a>
131 <a href="#">Service</a>
132 <a href="#">About</a>
133 <a href="http://keleyi.com/a/bjac/182di68b.htm">原文</a>
134 </div>
135 <div class="right10"></div>
136 <div class="clear"></div>
137 </div>
138 
139 <!------- 导航11 ------->
140 <div class="top11"><a href="#">keleyi.com</a><del></del></div>
141 <div class="menu11">
142 <div>
143 <a href="#">Blog</a>
144 <a href="#">Themes</a>
145 <a href="#">Uploads</a>
146 <a href="#">Service</a>
147 <a href="#">About</a>
148 <del></del>
149 </div>
150 </div>
151 <div style="margin-bottom:30px;"><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo11.jpg" alt="wenqi blog" /></div>
152 
153 <!------- 导航12 ------->
154 <div class="box12">
155 <div class="menu12">
156 <div class="left12"></div>
157 <div class="center12">
158 <a href="#">Blog</a>
159 <a href="http://keleyi.com">Themes</a>
160 <a href="#">Service</a>
161 <a href="#">About</a>
162 <del></del>
163 </div>
164 <div class="right12"></div>
165 <div class="clear"></div>
166 </div>
167 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo12.jpg" alt="wenqi blog" /></div>
168 </div>
169 
170 <!------- 导航13 ------->
171 <div class="box13">
172 <div class="logo13"></div>
173 <div class="menu13">
174 <div>
175 <a href="#">Blog</a>
176 <a href="#">Themes</a>
177 <a href="#">Service</a>
178 <a href="#">About</a>
179 <del></del>
180 </div>
181 </div>
182 <div class="top13"></div>
183 </div>
184 
185 <!------- 导航14 ------->
186 <div class="box14">
187 <div class="top14">
188 <a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
189 </div>
190 <div class="menu14">
191 <label></label><span></span>
192 <a href="#">Blog</a><span></span>
193 <a href="#">Gallery</a><span></span>
194 <a href="#">Themes</a><span></span>
195 <a href="#">Service</a><span></span>
196 <a href="http://keleyi.com">About</a>
197 <del></del>
198 </div>
199 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div>
200 </div>
201 
202 <!------- 导航15 ------->
203 <div class="box15">
204 <div class="left15"></div>
205 <div class="menu15">
206 <a href="#">Blog</a><span></span>
207 <a href="#">Gallery</a><span></span>
208 <a href="#">Service</a><span></span>
209 <a href="#">About</a>
210 <del></del>
211 </div>
212 <div class="clear"></div>
213 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div>
214 </div>
215 
216 <!------- 导航16 ------->
217 <div class="menu16">
218 <a href="#">Blog</a>
219 <a href="#">Themes</a>
220 <a href="#">Uploads</a>
221 <a href="#">Service</a>
222 <a href="#">About</a>
223 <del></del>
224 </div>
225 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div>
226 
227 <!------- 导航17 -------> 
228 <div class="top17">
229 <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
230 </div>
231 <div class="menu17">
232 <a href="#">Blog</a>
233 <a href="#">Gallery</a>
234 <a href="#">Service</a>
235 <a href="#">Works</a>
236 <a href="#">About</a>
237 <del></del>
238 </div>
239 
240 <!------- 导航18 -------> 
241 <div class="box18">
242 <div class="top18"></div>
243 <div class="menu18">
244 <a href="http://keleyi.com" class="a1">Blog</a>
245 <a href="#" class="a2">Gallery</a>
246 <a href="#" class="a3">Service</a>
247 <a href="#" class="a4">About</a>
248 <del></del>
249 </div>
250 </div>
251 
252 <!------- 导航19 -------> 
253 <div class="top19">
254 <a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a>
255 </div>
256 <div class="menu19">
257 <a href="#">Blog</a>
258 <a href="#">Gallery</a>
259 <a href="#">Service</a>
260 <a href="#">Works</a>
261 <a href="#">About</a>
262 <del></del>
263 </div>
264 <div class="bottom19"></div>
265 
266 <!------- 导航20 ------->
267 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo20.jpg" alt="wenqi's blog" /></div>
268 <div class="menu20">
269 <a href="http://keleyi.com/menu/net/" class="a1">Blog</a>
270 <a href="http://keleyi.com/menu/javascript/" class="a2">Gallery</a>
271 <a href="http://keleyi.com/menu/jquery/" class="a3">Service</a>
272 <a href="http://keleyi.com/menu/webqd/" class="a4">Works</a>
273 <del></del>
274 </div>
275 <div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div>
276 
277 </body>
278 </html>

本文转载自柯乐义:http://keleyi.com/a/bjac/182di68b.htm

posted on 2013-09-21 22:54  计划  阅读(2098)  评论(0编辑  收藏  举报