效果体验：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源码的更多相关文章

  1. WmS详解(二)之如何理解Window和窗口的关系？基于Android7.0源码

    上篇博客(WmS详解(一)之token到底是什么?基于Android7.0源码)中我们简要介绍了token的作用,这里涉及到的概念非常多,其中出现频率最高的要数Window和窗口这一对搭档了,那么我们 ...

  2. Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮

    前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP)/动态显示和隐藏NavigationBar 在某些特殊定制的版本中要求 ...

  3. 从谷歌官网下载android 6.0源码、编译并刷入nexus 6p手机

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/fuchaosz/article/details/52473660 1 前言 经过一周的奋战,终于从谷 ...

  4. AFNetworking 3.0 源码解读 总结（干货）（下）

    承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...

  5. AFNetworking 3.0 源码解读（十一）之 UIButton/UIProgressView/UIWebView + AFNetworking

    AFNetworking的源码解读马上就结束了,这一篇应该算是倒数第二篇,下一篇会是对AFNetworking中的技术点进行总结. 前言 上一篇我们总结了 UIActivityIndicatorVie ...

  6. AFNetworking 3.0 源码解读（十）之 UIActivityIndicatorView/UIRefreshControl/UIImageView + AFNetworking

    我们应该看到过很多类似这样的例子:某个控件拥有加载网络图片的能力.但这究竟是怎么做到的呢?看完这篇文章就明白了. 前言 这篇我们会介绍 AFNetworking 中的3个UIKit中的分类.UIAct ...

  7. AFNetworking 3.0 源码解读（九）之 AFNetworkActivityIndicatorManager

    让我们的APP像艺术品一样优雅,开发工程师更像是一名匠人,不仅需要精湛的技艺,而且要有一颗匠心. 前言 AFNetworkActivityIndicatorManager 是对状态栏中网络激活那个小控 ...

  8. AFNetworking 3.0 源码解读（八）之 AFImageDownloader

    AFImageDownloader 这个类对写DownloadManager有很大的借鉴意义.在平时的开发中,当我们使用UIImageView加载一个网络上的图片时,其原理就是把图片下载下来,然后再赋 ...

  9. AFNetworking 3.0 源码解读（七）之 AFAutoPurgingImageCache

    这篇我们就要介绍AFAutoPurgingImageCache这个类了.这个类给了我们临时管理图片内存的能力. 前言 假如说我们要写一个通用的网络框架,除了必备的请求数据的方法外,必须提供一个下载器来 ...

随机推荐

  1. Attribute富文本使用方法

    ★★★Attribut富文本★★★ 在UITextView和UILable的使用中很多的时候会用到富文本. UITextView和UILable的区别在于: ★★★★UITextView 当文字大于一 ...

  2. JavaScript 函数的两种声明方式

    1.函数声明的方式 JavaScript声明函数有两种选择:函数声明法,表达式定义法. 函数声明法 function sum (num1 ,num2){ return num1+num2 } 表达式定 ...

  3. Ubuntu 14.04 64bit 安装tensorflow（GPU版本）

    本博客主要用于在Ubuntu14.04 64bit 操作系统上搭建google开源的深度学习框架tensorflow. 0.安装CUDA和cuDNN 如果要安装GPU版本的tensorflow,就必须 ...

  4. ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

    上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

  5. .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑) 与 .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB中,介绍了LiteDB的基本使用情况以及部 ...

  6. 【开源】OSharp框架解说系列（5.2）：EntityFramework数据层实现

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  7. 如何使用Xmanager及VNC登录远程桌面

    如何调用远程桌面,比较常见的有两种方式:Xmanager及VNC 正好今天鼓捣了一下,特整理如下: Xmanager Xmanager的调用也有两种方式: 一.直接在Xshell中调用 这时需设置会话 ...

  8. Lua 学习笔记（六）迭代器

    一.迭代器的定义      “迭代器”就是一种可以遍历一种集合中所有元素的机制.在Lua中迭代器以函数的形式表示,即没掉用一次函数,即可返回集合中的“下一个”元素.迭代器的实现可以借助于闭合函数实现, ...

  9. php判断数据库是否连接成功的测试例子

    php判断数据库是否连接成功的测试例子 如果出现数据库配置不正确的错误,请看php与mysql的配置教程: win7系统下如何配置php-Apache-mysql环境 http://www.cnblo ...

  10. objective-c 语法快速过（7）编译器特性ARC

    ARC(是编译器特性) ARC是自iOS 5之后增加的新特性,完全消除了手动管理内存的烦琐,编译器会自动在适当的地方插入适当的retain.release.autorelease语句.你不再需要担心内 ...