点击这里查看效果：
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. GitFlow

    git工作流 始终保持有master分支(只要有目录,git就自动创建)和develop分支(手动创建) 一.主分支Master二.开发分支Develop三.临时性分支(最后发布要删除的)* 功能(f ...

  2. memset

    函数原型: void *memset(void *s, int ch, size_t n); 函数解释:将s中当前位置后面的n个字节 (typedef unsigned int size_t )用 c ...

  3. MongoDB 文档的查询和插入操作

    MongoDB是文档型数据库,有一些专门的术语,和关系型DB相似,但也有差异,例如,Collection类似于关系型DB的Table,document类似于row,key/value pair类似于c ...

  4. C#设计模式系列：简单工厂模式（Simple Factory）

    1. 简单工厂模式简介 1.1 定义 简单工厂模式定义一个Factory类,可以根据参数的不同返回不同类的实例,被创建的实例通常有共同的父类. 简单工厂模式只需要一个Factory类. 简单工厂模式又 ...

  5. 解决升级Win 10 IP 10122后无法调试UAP应用的方法

    可能各位也像老周一样,第一时间升级了Build 10122,但不知道大家有没有发现,当你升级后,写一个UAP应用,要调试运行时,就会出错,错误如下: DEP0730 : 注册应用程序失败,因为目标计算 ...

  6. 数据可视化-EChart2.0.0使用中遇到的2个问题

    之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可.然后现在开发的系统需要交付给客户使用.所以现在图表控件不能直接使用FusionChart和HighChart,通 ...

  7. EF7 - What Does “Code First Only” Really Mean

    这篇文章很有价值,但翻译了一段,实在翻译不下去了,没办法,只能转载了. 英文地址:http://blogs.msdn.com/b/adonet/archive/2014/10/21/ef7-what- ...

  8. Lua 学习笔记（九）协同程序（线程thread）

    协同程序与线程thread差不多,也就是一条执行序列,拥有自己独立的栈.局部变量和命令指针,同时又与其他协同程序共享全局变量和其他大部分东西.从概念上讲线程与协同程序的主要区别在于,一个具有多个线程的 ...

  9. Oracle 11g 编译使用BBED

    环境:RHEL 6.4 + Oracle 11.2.0.4 1. 拷贝缺失文件 2. 编译BBED 3. BBED使用测试 Reference 1. 拷贝缺失文件 11g中缺失几个相关文件,但我们实际 ...

  10. （三）WebGIS前端地图显示之根据地理范围换算出瓦片行列号的原理(核心)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或 ...