生活随笔
收集整理的这篇文章主要介绍了
css制作漂亮彩带导航条菜单
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
点击这里查看效果：
http://keleyi.com/keleyi/phtml/divcss/17.htm
效果图：
以下是源代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>css制作漂亮彩带导航条菜单-柯乐义
</title><base target="_blank" />
6
7 <style type="text/css">
8 body{margin:0;padding:0;background-color:#000;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";color:#fff;}
9 a{color:#f00893}
10 /* mydiv */
11 .mydiv{margin:100px auto 0;line-height:40px;position:relative;padding:0 40px;float:left;}
12 .mydiv a{height:40px;text-decoration:none;color:#000;float:left;}
13 .mydiv a span{background-color:#fff;display:block;float:left;height:40px;position:relative;padding:0 13px;cursor:pointer;}
14 /* 对于这个 我很费解 在IETester测试的时候 必须给a:hover 设置给 a 没有的属性*/
15 .mydiv a:hover{_display:block;}
16 .mydiv a:hover span{top:-6px;background-color:#FFD204;text-shadow:0 0 10px #000;}
17 .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;}
18 .mydiv a:hover i{left:0;border-color:#9B8651 #9B8651 #fff #fff;}
19 .mydiv a:hover b{right:0;border-color:#9B8651 #fff #fff #9B8651;}
20 .item{border:20px solid #fff;border-left-color:#000;position:absolute;line-height:0;left:0;top:0;}
21 .item2{border-left-color:#fff;border-right-color:#000;right:0;left:auto;}
22 </style>
23
24 </head>
25 <body>
26
27 <div style="width:650px;margin:0 auto">
28
29
30 <div class="mydiv">
31 <span class="item"></span>
32 <a href="http://keleyi.com/a/bjac/iqiiedy2.htm"><span><i></i>圣诞快乐
<b></b></span></a>
33 <a href="http://keleyi.com/a/bjac/flyuqb6r.htm"><span><i></i>雪花效果
<b></b></span></a>
34 <a href="http://keleyi.com/a/bjad/vvks7sw7.htm"><span><i></i>WinForm
<b></b></span></a>
35 <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm"><span><i></i>放大镜
<b></b></span></a>
36 <a href="http://keleyi.com/menu/javascript/"><span><i></i>javaScript
<b></b></span></a>
37 <a href="http://keleyi.com/menu/jquery/"><span><i></i>jQuery
<b></b></span></a>
38 <span class="item item2"></span>
39 </div>
40
41
42 </div>
43 <br />
44 <div style=" width:600px;margin:0 auto; text-align:center; font-size:12px;clear:both">
45 <p><a href="http://keleyi.com/a/bjad/3rn3axhe.htm">原文
</a>由柯乐义整理，查看更多特效：【
<a href="http://keleyi.com/" target="_blank">柯乐义
</a>】keleyi.com
</p>
46 <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流
</p>
47 <p></p>
48 </div>
49 </body>
50 </html> 转载自：http://keleyi.com/a/bjad/3rn3axhe.htm
web前端：http://www.cnblogs.com/jihua/p/webfront.html
转载于:https://www.cnblogs.com/jihua/p/caidai.html
总结
以上是生活随笔为你收集整理的css制作漂亮彩带导航条菜单的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
