多个精美的导航样式web2.0源码
效果体验：http://keleyi.com/keleyi/phtml/divcss/6.htm
兼容多浏览器，例如IE，Chrome，火狐 等。
完整代码,保存到htm文件打开也可以查看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>20个web2.0导航样式-柯乐义</title>
<link href="http://keleyi.com/keleyi/phtml/divcss/6/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body> <!------- 导航1 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo1.jpg" alt="wenqi's blog" /></div>
<div class="menu1">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo2.jpg" alt="wenqi's blog" /></div> <!------- 导航2 ------->
<div class="menu2">
<div class="left2"></div>
<div class="center2">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div>
<div class="right2"></div>
<div class="clear"></div>
</div> <!------- 导航3 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo3.jpg" alt="wenqi's blog" /></div>
<div class="menu3">
<div class="left3"></div>
<div class="center3">
<a href="#">Blog</a>
<a href="#">Books</a>
<a href="#">Portfolio</a>
<a href="#">Photos</a>
<a href="#">Service</a>
</div>
<div class="right3"></div>
<div class="clear"></div>
</div> <!------- 导航4 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo4.jpg" alt="WQ's space" /></div>
<div class="menu4">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
<del></del>
</div> <!------- 导航4 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo5.jpg" alt="wenqi's space" /></div>
<div class="menu5">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div> <!------- 导航6 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo6.jpg" alt="wenqi's blog" /></div>
<div class="menu6">
<div class="left6"></div>
<div class="center6">
<a href="#">Blog</a><span></span>
<a href="#">Themes</a><span></span>
<a href="#">Service</a><span></span>
<a href="#">About</a><span></span>
<a href="#">Help</a>
</div>
<div class="right6"></div>
<div class="clear"></div>
</div> <!------- 导航7 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo7.jpg" alt="wenqi's blog" /></div>
<div class="menu7">
<div class="left7"></div>
<div class="center7">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="#">Help</a>
</div>
<div class="right7"></div>
<div class="clear"></div>
</div> <!------- 导航8 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo8.jpg" alt="wenqi blog" /></div>
<div class="menu8">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div> <!------- 导航9 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo9.jpg" alt="wenqi blog" /></div>
<div class="menu9">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div> <!------- 导航10 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo10.jpg" alt="wenqi's blog" /></div>
<div class="menu10">
<div class="left10"></div>
<div class="center10">
<a href="http://keleyi.com">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<a href="http://keleyi.com/a/bjac/182di68b.htm">原文</a>
</div>
<div class="right10"></div>
<div class="clear"></div>
</div> <!------- 导航11 ------->
<div class="top11"><a href="#">keleyi.com</a><del></del></div>
<div class="menu11">
<div>
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
</div>
<div style="margin-bottom:30px;"><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo11.jpg" alt="wenqi blog" /></div> <!------- 导航12 ------->
<div class="box12">
<div class="menu12">
<div class="left12"></div>
<div class="center12">
<a href="#">Blog</a>
<a href="http://keleyi.com">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<div class="right12"></div>
<div class="clear"></div>
</div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo12.jpg" alt="wenqi blog" /></div>
</div> <!------- 导航13 ------->
<div class="box13">
<div class="logo13"></div>
<div class="menu13">
<div>
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
</div>
<div class="top13"></div>
</div> <!------- 导航14 ------->
<div class="box14">
<div class="top14">
<a href="#">Contact</a><span>|</span><a href="#">Downloads</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
</div>
<div class="menu14">
<label></label><span></span>
<a href="#">Blog</a><span></span>
<a href="#">Gallery</a><span></span>
<a href="#">Themes</a><span></span>
<a href="#">Service</a><span></span>
<a href="http://keleyi.com">About</a>
<del></del>
</div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg14_bg.jpg" alt="wenqi's blog" /></div>
</div> <!------- 导航15 ------->
<div class="box15">
<div class="left15"></div>
<div class="menu15">
<a href="#">Blog</a><span></span>
<a href="#">Gallery</a><span></span>
<a href="#">Service</a><span></span>
<a href="#">About</a>
<del></del>
</div>
<div class="clear"></div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg15_bg.jpg" alt="wenqi's blog" /></div>
</div> <!------- 导航16 ------->
<div class="menu16">
<a href="#">Blog</a>
<a href="#">Themes</a>
<a href="#">Uploads</a>
<a href="#">Service</a>
<a href="#">About</a>
<del></del>
</div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg16_bg.jpg" alt="wenqi blog" /></div> <!------- 导航17 ------->
<div class="top17">
<a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a><del></del>
</div>
<div class="menu17">
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">Service</a>
<a href="#">Works</a>
<a href="#">About</a>
<del></del>
</div> <!------- 导航18 ------->
<div class="box18">
<div class="top18"></div>
<div class="menu18">
<a href="http://keleyi.com" class="a1">Blog</a>
<a href="#" class="a2">Gallery</a>
<a href="#" class="a3">Service</a>
<a href="#" class="a4">About</a>
<del></del>
</div>
</div> <!------- 导航19 ------->
<div class="top19">
<a href="#">Contact</a><span>|</span><a href="#">Register</a><span>|</span><a href="#">Login</a>
</div>
<div class="menu19">
<a href="#">Blog</a>
<a href="#">Gallery</a>
<a href="#">Service</a>
<a href="#">Works</a>
<a href="#">About</a>
<del></del>
</div>
<div class="bottom19"></div> <!------- 导航20 ------->
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/logo/logo20.jpg" alt="wenqi's blog" /></div>
<div class="menu20">
<a href="http://keleyi.com/menu/net/" class="a1">Blog</a>
<a href="http://keleyi.com/menu/javascript/" class="a2">Gallery</a>
<a href="http://keleyi.com/menu/jquery/" class="a3">Service</a>
<a href="http://keleyi.com/menu/webqd/" class="a4">Works</a>
<del></del>
</div>
<div><img src="http://keleyi.com/keleyi/phtml/divcss/6/image/navigation/bg20_bg.jpg" alt="wenqi's blog" /></div> </body>
</html>
本文转载自柯乐义：http://keleyi.com/a/bjac/182di68b.htm
多个精美的导航样式web2.0源码的更多相关文章
- WmS详解(二)之如何理解Window和窗口的关系？基于Android7.0源码
上篇博客(WmS详解(一)之token到底是什么?基于Android7.0源码)中我们简要介绍了token的作用,这里涉及到的概念非常多,其中出现频率最高的要数Window和窗口这一对搭档了,那么我们 ...
- Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮
前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的版本中要求 ...
- 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/fuchaosz/article/details/52473660 1 前言 经过一周的奋战,终于从谷 ...
- AFNetworking 3.0 源码解读 总结（干货）（下）
承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...
- AFNetworking 3.0 源码解读（十一）之 UIButton/UIProgressView/UIWebView + AFNetworking
AFNetworking的源码解读马上就结束了,这一篇应该算是倒数第二篇,下一篇会是对AFNetworking中的技术点进行总结. 前言 上一篇我们总结了 UIActivityIndicatorVie ...
- AFNetworking 3.0 源码解读（十）之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking
我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...
- AFNetworking 3.0 源码解读（九）之 AFNetworkActivityIndicatorManager
让我们的APP像艺术品一样优雅,开发工程师更像是一名匠人,不仅需要精湛的技艺,而且要有一颗匠心. 前言 AFNetworkActivityIndicatorManager 是对状态栏中网络激活那个小控 ...
- AFNetworking 3.0 源码解读（八）之 AFImageDownloader
AFImageDownloader 这个类对写DownloadManager有很大的借鉴意义.在平时的开发中,当我们使用UIImageView加载一个网络上的图片时,其原理就是把图片下载下来,然后再赋 ...
- AFNetworking 3.0 源码解读（七）之 AFAutoPurgingImageCache
这篇我们就要介绍AFAutoPurgingImageCache这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...
随机推荐
- Redis在windows环境下ThinkPHP的安装和使用
1.Redis概述: 2.Redis在windows环境下的安装: 下载地址:https://github.com/dmajkic/redis/downloads,选取其中一个zip压缩包:
- LINQ系列：Linq to Object转换操作符
转换是指将输入对象的类型转变为序列的动作. 1. AsEnumerable AsEnumerable操作符将查询的输入以IEnumberable(T)类型返回. 2. Cast Cast操作符将IEn ...
- win8下IE10的鼠标mouse事件响应错误BUG
具体症状就是有时候鼠标左键响应,有时候右键才能响应 问题的原因就是事件对象的detail没有复位 https://github.com/clientside/amplesdk/issues/187
- 前端学PHP之变量
× 目录 [1]变量定义 [2]关键字 [3]变量赋值[4]可变变量[5]变量函数 前面的话 变量是用于临时存储值的容器.这些值可以是数字.文本,或者复杂得多的排列组合.变量在任何编程语言中都居于核心 ...
- IOS数据存储之归档/解档
前言: 前天学习了NSUserDefaults,我们知道NSUserDefaults不能保存自定义对象,所以我们今天来认识一下归档(NSKeyedArchiver)和解档(NSKeyedUnarchi ...
- Web APi之过滤器创建过程原理解析【一】（十）
前言 Web API的简单流程就是从请求到执行到Action并最终作出响应,但是在这个过程有一把[筛子],那就是过滤器Filter,在从请求到Action这整个流程中使用Filter来进行相应的处理从 ...
- 本地maven仓库使用及配置
本地仓库的创建 下载 nexus-2.11.4-01-bundle.zip 解压并运行C:\nexus-2.11.4-01-bundle\nexus-2.11.4-01\bin\jsw\windows ...
- 【记录】ASP.NET XSS 脚本注入攻击
输入进行 Html 转码: HttpUtility.HtmlEncode(content); 输入保留 Html 标记,使用 AntiXSS 过滤: Install-Package AntiXSS M ...
- java 线程池ThreadPoolExecutor 如何与 AsyncTask() 组合使用。
转载请声明出处谢谢!http://www.cnblogs.com/linguanh/ 这里主要使用Executors中的4种静态创建线程池实例方法中的 newFixedThreadPool()来举例讲 ...
- 如何 判断 设备 是否 连接 上 了 wifi
这里,我给出一个函数 public boolean sale_connect_check(WifiConfiguration wcg,Context context) { boolean judge_ ...