多个精美的导航样式web2.0源码

效果体验：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

多个精美的导航样式web2.0源码相关推荐

精美的导航引导页html源码
简介: 今天偶然间看到的,感觉挺好看就顺手扒了下来,所有信息均可代码修改,代码很简洁喜欢的拿走吧. 下载地址: http://www.bytepan.com/y5UWWyNDCXl
精美个人导航引导页html源码
介绍: 今天偶然间看到的,感觉挺好看就顺手扒了下来,所有信息均可代码修改,代码很简洁喜欢的拿走吧. 网盘下载地址: https://zijiewangpan.com/cyBf7NH6g7O 图片:
360网址导航源码5.0源码
介绍: 360网址导航源码 5.0源码纯净简约美观免费,运行环境:ASP/Access 统计代码在js\tj.js 留言板管理后台http://你的网站/feedback/admin_inde ...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮前言之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP) ...
原神创意工坊工具箱2.0源码-小程序前端源码
简介: 原神创意工坊工具箱2.0源码此源码原本是反编译而来的,原创意工坊工具箱2.0源码,为一款游戏的工具箱还有一款是一家车品内饰脚垫样式生成的小程序前端,一并打包了其主要功能有: 抽卡分析抽 ...
最新无限制188旅游系统V7.0升级补丁全社通V2.0补丁 Tourex 5.0源码下载
188旅游系统V7.0升级补丁全社通V2.0补丁 Tourex 5.0源码下载原188旅行网站办理体系今日正式晋级到7.0版别了,之前咱们都是V6.1.6.2--V6.6这样的晋级,这次咱们一次 ...
从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/fuchaosz/article/details/52473660 1 前言经过一周的奋战,终于从谷 ...
Android 8.0学习（32）---Android 8.0源码目录结构详解
Android 8.0源码目录结构详解 android的移植按如下流程: (1)android linux 内核的普通驱动移植,让内核可以在目标平台上运行起来. (2)正确挂载文件系统 ...
[Android编译(二)] 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
1 前言经过一周的奋战,终于从谷歌官网上下载最新的Android 6.0.1_r62源码,编译成功,并成功的刷入nexus6p,接着root完毕,现写下这篇博客记录一下实践过程. 2 简介自己下载 ...

多个精美的导航样式web2.0源码

多个精美的导航样式web2.0源码相关推荐

最新文章

热门文章