多个精美的导航样式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这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...
随机推荐
- rem与px的转换
rem与px的转换 引用自http://caibaojian.com/rem-and-px.html A-A+ 前端博客•前端开发教程•rem•3702View0 rem是相对于根元素<html ...
- Entity Framework Core 1.1 Preview 1 简介
实体框架核心(EF Core)是Entity Framework的一个轻量级,可扩展和跨平台版本. 10月25日,Entity Framework Core 1.1 Preview 1发布了. 升级到 ...
- OpenGL学习进程（13）第十课：基本图形的底层实现及算法原理
本节介绍OpenGL中绘制直线.圆.椭圆,多边形的算法原理. (1)绘制任意方向(任意斜率)的直线: 1)中点画线法: 中点画线法的算法原理不做介绍,但这里用到最基本的画0<=k ...
- lambda表达式之进化
前言 在C#我们可以自定义委托,但是C#为什么还要内置泛型委托呢?因为我们常常要使用委托,如果系统内置了一些你可能会用到的委托,那么就省去了定义委托,然后实例化委托的步骤,这样一来既使代码看起来简洁而 ...
- JavaScript操作Cookie
在Web开发中,我们经常使用Cookie保存一些不是非常敏高的数据.比如“下次自动登录”,“广告显示”等功能.定义是:某些网站为了辨别用户身份而存储在用户本地终端(主要是浏览器)上的数据.定义域RFC ...
- Objective-C中的老板是这样发通知的（Notification)
通知(Notification)简单的类比一下,公司的老总给下面的员工发通知啦,说明天公司要上市,各部门做一下准备工作.等通知发完,各部门收到后各司其职,做着自己该做的东西.假如Boss是 ...
- Openfire/XMPP学习之——一个简单的Smack样例
昨天讲了Openfire的搭建和配置,今天来讲一下Smack.如果对如何搭建和配置Openfire的,可以参考Openfire/XMPP学习之——Openfire的安装.配置. Smack是一个开源, ...
- 如何高效地向Redis插入大量的数据
最近有个哥们在群里问,有一个日志,里面存的是IP地址(一行一个),如何将这些IP快速导入到Redis中. 我刚开始的建议是Shell+redis客户端. 今天,查看Redis官档,发现文档的首页部分( ...
- C# 在Word文档中生成条形码
C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...
- 使用openfiler设置SMB/CIFS共享总是不通过的一例与解决办法
最近使用openfiler进行空闲存储的集中化管理与多主机节点共享,等设置到了SMB/CIFS的时候总是通过不了,前提需要开启的LDAP内建在openfiler也都开启并设置好了,但就是无法通过&qu ...