多个精美的导航样式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这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...
随机推荐
- MVC：The name 'Scripts' does not exist in the current context
汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 解决:在View下面的Web.Config的namespaces添加 <add n ...
- LINQ系列：LINQ to XML操作
LINQ to XML操作XML文件的方法,如创建XML文件.添加新的元素到XML文件中.修改XML文件中的元素.删除XML文件中的元素等. 1. 创建XML文件 string xmlFilePath ...
- C#设计模式系列：状态模式（State）
1.状态模式简介 1.1>.定义 状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
- c语言表白程序代码
双十一要到了,好激动啊!!! 是时候准备出手了! 花了一天的时间写的表白代码. 表示自己弱弱的..... 看了网上好多都是js写的,感觉碉堡了!js用的不熟,前端不好,java,Python写起来 ...
- 【开源】OSharp3.3框架解说系列：重新开源及3.3版本新特性
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
- 浅谈webWorker
一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaS ...
- T-Sql学习系列完结
T-Sql(一)简单语法 T-Sql(二)事务(Transaction) T-Sql(三)存储过程(Procedure) T-Sql(四)表关联和视图(view) T-Sql(五)xml操作 T-Sq ...
- 正则匹配抓取input 隐藏输入项和 <td>标签内的内容
这里不多作解释了,只要提供方法,如果想了解正则匹配,就去百度. 第一条是,匹配出所有的隐藏输入域 $patern = "/<input(.*?)type=\"hidden\& ...
- 1Z0-053 争议题目解析577
1Z0-053 争议题目解析577 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 577.What methods are available to recover lost co ...
- T-SQL高级查询语句
高级查询 1.连接查询,对结果集列的扩展select * from info select * from info,nation #形成笛卡尔积select * from info,nation wh ...