点击这里查看效果：
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. SQL 笔记 By 华仔

    -------------------------------------读书笔记------------------------------- 笔记1-徐 最常用的几种备份方法 笔记2-徐 收缩数据 ...

  2. [汇编与C语言关系]5. volatile限定符

    现在研究一下编译器优化会对生成的指令产生什么影响,在此基础上介绍C语言的volatile限定符.首先看下面的C程序: /* artificial device registers */ unsigne ...

  3. css3圆形头像（当图片宽高不相等时）

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  4. 用 namspace 隔离 DHCP 服务 - 每天5分钟玩转 OpenStack（90）

    Neutron 通过 dnsmasq 提供 DHCP 服务,而 dnsmasq 如何独立的为每个 network 服务呢? 答案是通过 Linux Network Namespace 隔离,本节将详细 ...

  5. 关于在Linux64位下安装xampp

    网上关于这个主题的内容比较少,所以就写一下按装后的心得.之前一直在windows下用xampp,想在Linux下也体验一把,可是自己的Linux装的是64位的在XAMPP的官网上http://www. ...

  6. T-Sql（五）xml操作

    t-sql中的xml操作在我们平时做项目的过程中用的很少,因为我们处理的数据量很少,除非一些用到xml的地方,t-sql中xml操作一般用在数据量很大,性能优化的地方,当然我在平时做项目的时候也是没用 ...

  7. Hammer.js分析（三）——input.js

    input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...

  8. java多线程--几个多线程面试题小结

    自学了一段时间的多线程知识,尝试了做了几个编程题,发现想象中很简单的功能,自己真写起来要花费远超自己想象的功夫,知识点易学,不易用啊. 面试题1:编写程序实现,子线程循环10次,接着主线程循环20次, ...

  9. 【Python实战】Pandas：让你像写SQL一样做数据分析（一）

    1. 引言 Pandas是一个开源的Python数据分析库.Pandas把结构化数据分为了三类: Series,1维序列,可视作为没有column名的.只有一个column的DataFrame: Da ...

  10. Hibernate —— HQL、QBC检索方式

    一.HQL 检索方式 以双向的一对多来测试 HQL 检索方式.以 Department 和 Employee 为例. 建表语句: CREATE TABLE department ( dept_id ) ...