css制作漂亮彩帶導航條菜單
編輯：WEB前端代碼
點擊這裡查看效果：
http:///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:#fff;font:normal 14px/24px "\5FAE\8F6F\96C5\9ED1";}
/* mydiv */
.mydiv{margin:100px auto 0;line-height:40px;position:relative;padding:0 40px;float:left;}
.mydiv a{height:40px;text-decoration:none;color:#fff;float:left;}
.mydiv a span{background-color:green;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:red;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:red red green green;}
.mydiv a:hover b{right:0;border-color:red green green red;}
.item{border:20px solid green;border-left-color:#fff;position:absolute;line-height:0;left:0;top:0;}
.item2{border-left-color:green;border-right-color:#fff;right:0;left:auto;}
</style>
</head>
<body>
<div style="width:650px;margin:0 auto">
<div class="mydiv">
<span class="item"></span>
<a href="http:///a/bjac/iqiiedy2.htm"><span><i></i>聖誕快樂<b></b></span></a>
<a href="http:///a/bjac/flyuqb6r.htm"><span><i></i>雪花效果<b></b></span></a>
<a href="http:///a/bjad/vvks7sw7.htm"><span><i></i>WinForm<b></b></span></a>
<a href="http:///a/bjad/q2ee2xyt.htm"><span><i></i>放大鏡<b></b></span></a>
<a href="http:///menu/javascript/"><span><i></i>javaScript<b></b></span></a>
<a href="http:///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:///a/bjad/3rn3axhe.htm">原文</a>由整理，查看更多特效：【<a href="http:///" target="_blank"></a>】</p>
<p>＊尊重他人勞動成果，轉載請自覺注明出處！注：此代碼僅供學習交流</p>
<p></p>
</div>
</body>
</html>
- 上一頁:對CSS中float和clear的分析
- 下一頁:css的px和em單位
小編推薦
熱門推薦