点击这里查看效果：
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. Spring<bean>标签是反射来实现的

  2. [译]AngularJS $apply, $digest, 和$evalAsync的比较

    原文:The differences between AngularJS $apply, $digest, and $evalAsync 你是不是也常在想AngularJS $apply, $dige ...

  3. GUID简介

    GUID (全局唯一标识符) 编辑 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点. ...

  4. word-spacing汉字不起作用的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 调节文字间的距离,发现==>word-spacing汉字不起作用 研究发现, ...

  5. Sql Server系列：索引基础

    1 索引概念 索引用于快速查找在某个列中某个特定值的行,不使用索引,数据库必须从第1条记录开始读完整个表,知道找出需要的行.表越大,查询数据所花费的时间越多.如果表中查询的列有索引,数据库能快速到达一 ...

  6. IOS入门之Swift语言（一）

    经过不断的努力,小哥也买了台苹果设备,终于可以开始我的IOS之旅了,说来确实令人苦恼,为了学习IOS我这着贫农阶级,省了几个月的零花钱,外加向亲朋好友求救,最终痛下心扉,卖了台MAC pro128G版 ...

  7. 理解 Neutron Server 分层模型 - 每天5分钟玩转 OpenStack（69）

    本节开始讨论 Neutron 的各个服务组件,首先学习 Neutron Server . 上图是 Neutron Server 的分层结构,至上而下依次为: Core API对外提供管理 networ ...

  8. DOM-Node类型

    DOM(文档队形模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的一部分.DOM可以讲任何HTML和XML文档描绘成一 ...

  9. android跟服务器使用json传递数据

    最近在做项目,使用了json传递数据,把服务器对象转换成json字符串返回,android使用gson包解析json字符串变成对象. 1.服务器代码编写,我这边是在servlet里面 Peron pe ...

  10. 拨乱反正：DDD 回归具体的业务场景，Domain Model 再再重新设计

    首先,把最真挚的情感送与梅西,加油! 写在前面 阅读目录: 重申业务场景 Domain Model 设计 后记 上一篇<设计窘境:来自 Repository 的一丝线索,Domain Model ...