点击这里查看效果：
http://keleyi.com/keleyi/phtml/divcss/17.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>css制作漂亮彩带导航条菜单-柯乐义</title><base target="_blank" />

 <style type="text/css">

 body{margin:0;padding:0;background-color:#000;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#fff;}

 a{color:#f00893}

 /* mydiv */

 .mydiv{margin:100px auto 0;line-height:40px;position:relative;padding:0 40px;float:left;}

 .mydiv a{height:40px;text-decoration:none;color:#000;float:left;}

 .mydiv a span{background-color:#fff;display:block;float:left;height:40px;position:relative;padding:0 13px;cursor:pointer;}

 /* 对于这个 我很费解 在IETester测试的时候 必须给a:hover 设置给 a 没有的属性*/

 .mydiv a:hover{_display:block;}

 .mydiv a:hover span{top:-6px;background-color:#FFD204;text-shadow:0 0 10px #000;}

 .mydiv a:hover i, .mydiv a:hover b{position:absolute;border:3px solid #fff;width:0;height:0;line-height:0;bottom:-6px;font-style:normal;font-weight:normal;}

 .mydiv a:hover i{left:0;border-color:#9B8651 #9B8651 #fff #fff;}

 .mydiv a:hover b{right:0;border-color:#9B8651 #fff #fff #9B8651;}

 .item{border:20px solid #fff;border-left-color:#000;position:absolute;line-height:0;left:0;top:0;}

 .item2{border-left-color:#fff;border-right-color:#000;right:0;left:auto;}

 </style>

 </head>

 <body>

 <div style="width:650px;margin:0 auto">

     <div class="mydiv">

         <span class="item"></span>

         <a href="http://keleyi.com/a/bjac/iqiiedy2.htm"><span><i></i>圣诞快乐<b></b></span></a>

         <a href="http://keleyi.com/a/bjac/flyuqb6r.htm"><span><i></i>雪花效果<b></b></span></a>

         <a href="http://keleyi.com/a/bjad/vvks7sw7.htm"><span><i></i>WinForm<b></b></span></a>

         <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm"><span><i></i>放大镜<b></b></span></a>

         <a href="http://keleyi.com/menu/javascript/"><span><i></i>javaScript<b></b></span></a>

         <a href="http://keleyi.com/menu/jquery/"><span><i></i>jQuery<b></b></span></a>

         <span class="item item2"></span>

     </div>

 </div>

     <br />

 <div style=" width:600px;margin:0 auto; text-align:center; font-size:12px;clear:both">

 <p><a href="http://keleyi.com/a/bjad/3rn3axhe.htm">原文</a>由柯乐义整理，查看更多特效：【<a href="http://keleyi.com/" target="_blank">柯乐义</a>】keleyi.com</p>

 <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流</p>

 <p></p>

 </div>

 </body>

 </html>

转载自：http://keleyi.com/a/bjad/3rn3axhe.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

css制作漂亮彩带导航条菜单的更多相关文章

  1. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  4. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  5. css制作最简单导航栏

    css制作最简单导航栏

  6. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  7. 一、HTML和CSS基础--网页布局--实践--导航条菜单的制作

    案例一:导航菜单的制作 垂直菜单

  8. 关于CSS样式的那些事_导航条菜单讲解

    最近开始忙着开自己的个人博客了,自己的前端确实是渣渣.没办法,一步步来,从慕课网上慢慢学着先. 首先带来的是一个导航栏的设计: 垂直导航栏的设计: 直接上代码: <!DOCTYPE html P ...

  9. css制作简单的导航栏

    //css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...

随机推荐

  1. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  2. LINQ系列：Linq to Object排序操作符

    LINQ排序操作符包括:OrderBy.OrderByDescending.ThenBy.ThenByDescending及Reverse. 1. OrderBy 1>. 原型定义 public ...

  3. java获取类的信息

    关键技术剖析 1.java.lang.reflect包实现了java的反射机制,在使用反射机制时,需要导入该包. 2.Class类的forName方法能够根据类名加载类,获得类的Class对象. Cl ...

  4. Mac OS apache php配置

    1.进入Apache配置文件sudo vi /etc/apache2/httpd.conf    找到#LoadModule php5_module libexec/apache2/libphp5.s ...

  5. JavaScript之自我总结篇

    最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...

  6. 应用程序框架实战二十九:Util Demo介绍

    上文介绍了我选择EasyUi作为前端框架的原因,并发放了最新Demo.本文将对这个Demo进行一些介绍,以方便你能够顺利运行起来. 这个Demo运行起来以后,是EasyUi的一个简单CRUD操作,数据 ...

  7. MySQL学习笔记九：存储过程，存储函数，触发器

    存储过程 1.存储过程由一组特定功能的SQL语句组成,对于大型应用程序优势较大,相对不使用存储过程,具有以下优点: a.性能提高,因为存储过程是预编译的,只需编译一次,以后调用就不须再编译 b.重用性 ...

  8. IOS开发之自定义Button(集成三种回调模式)

    前面在做东西的时候都用到了storyboard,在今天的代码中就纯手写代码自己用封装个Button.这个Button继承于UIView类,在封装的时候用上啦OC中的三种回调模式:目标动作回调,委托回调 ...

  9. 关于java连接mysql数据库的几个问题的解决方法。

    今天就为了连接下数据库获取信息来提供给ListView使用,搞了足足5小时. 出现的问题有: 第一个是,DriverManager.getConnection(url, user, pwd),这个函数 ...

  10. VirtualBox安装Debian6的方法和步骤(详细)

    下面是用VirtualBox安装Debian6的方法和步骤 l 新建一个文件夹,用于存放虚拟硬盘,如Debian l 打开VirtualBox,点击新建 l 输入虚拟机名称,Debian_6 l 给虚 ...