多个精美的导航样式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这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...
随机推荐
- easyui datagrid cell title换行
" " title="' +row.TaskName + "
- sql复习第五次
1.在数据库范围内,关系的每一个属性值是不可分解的 关系中不允许出现重复元组 由于关系是一个集合,因此不考虑元组的顺序 2.笛卡儿积是两个关系的所有元组组合而成的,而等值联接是由笛卡儿积和选择运算组合 ...
- 在计算机 . 上没有找到服务 WAS
添加的程序不全导致或者服务没开启导致 重新打开IIS,刷新一下 发现已经可以了,不再标红报错了
- Entity Framework Code First添加修改及删除单独实体
对于一个单独实体的通常操作有3种:添加新的实体.修改实体以及删除实体. 1.添加新的实体 Entity Framework Code First添加新的实体通过调用DbSet.Add()方法来实现. ...
- 实战MEF（3）：只导出类的成员
通过前面两篇文章的介绍,相信各位会明白MEF中有不少实用价值.上一文中我们也讨论了导入与导出,对于导出导入,今天我们再深入一点点,嗯,只是深入一点点而已,不会很难的,请大家务必放心,如果大家觉得看文章 ...
- WPF 子窗体关闭时显示父窗体
这个问题纠结了两天,今天在一个朋友的帮助下,解决了,其实很简单,但是可能作为新手,接触WPF时间还是短,因此作为一个问题困扰了我. 父窗体部分代码 private void EditInformati ...
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...
- Android NDK开发Hello Word!
在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...
- Java多线程系列--“JUC锁”02之 互斥锁ReentrantLock
本章对ReentrantLock包进行基本介绍,这一章主要对ReentrantLock进行概括性的介绍,内容包括:ReentrantLock介绍ReentrantLock函数列表ReentrantLo ...
- 設置Linux保留物理內存並使用 （1）
在Linux系統中可以通過memblock來設置系統保留物理內存,防止這些內存被內存管理系統分配出去. 作者: 彭東林 郵箱: pengdonglin137@163.com 平臺 硬件平臺: TQ24 ...