点击这里查看效果：
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. The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'

    今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...

  2. webBrowser 加载网页

    事件 webBrowser_DocumentCompleted private void webBrowser_DocumentCompleted(object sender, WebBrowserD ...

  3. OpenCascade Draw Test Harness

    OpenCascade Draw Test Harness eryar@163.com Abstract. Draw is a command interpreter based on Tcl/Tk ...

  4. MVC5 网站开发实践 2、后台管理

    目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...

  5. Android NDK开发Hello Word!

    在之前的博客中已经为大家介绍了,如何在win环境下配置DNK程序,本篇我将带大家实现一个简单的Hello jni程序,让大家真正感受一下NDK开发的魅力.这里我们选择使用C+JAVA开发Android ...

  6. （第七天）DOM练习一

    动态删除元素 给定一个ul列表,点击ul中子节点进行删除 window.onload = function() { ].childNodes; () console.log(list.length); ...

  7. WebService 学习之路（一）：了解并使用webService

    webService主要用于向其他系统提供接口以便调用,系统间可能开发语言等完全不同,根据约定的接口规范,调用者传递相关参数进行接口调用,服务方根据传入的条件进行业务处理并进行结果返回. webSer ...

  8. iOS开发之SQLite--C语言接口规范(三)——Binding Values To Prepared Statements

    在前面的博客中已经介绍了如何连接SQLite数据库,并且简单的查询和遍历结果集.在前面用到了sqlite3_stmt *stmt,也就是预编译后的SQL语句.在本篇博客中会了解一下sqlite3_st ...

  9. Thymeleaf 模板的使用

    Thymeleaf是现代化服务器端的Java模板引擎,不同与JSP和FreeMarker,Thymeleaf的语法更加接近HTML,并且也有不错的扩展性.详细资料可以浏览官网.本文主要介绍Thymel ...

  10. spring笔记--事务管理之声明式事务

    事务简介: 事务管理是企业级应用开发中必不可少的技术,主要用来确保数据的完整性和一致性, 事务:就是一系列动作,它们被当作一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. Spring中使 ...