極酷的CSS導航特效_菜單導航特效

極酷的CSS導航殊效，類似帶有圓角的效果，視覺效果很沖擊，精致小巧型，希看大家喜歡。

<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>極酷的CSS導航殊效</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
#invertedtabs{
margin-left:5px;
padding: 0;
width: 98%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 0px;
}

#invertedtabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of mrc*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(http://mb5u.com/jscss/demoimg/200906/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(http://mb5u.com/jscss/demoimg/200906/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}

#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*m.dounai2.com*/
}

</style>
</head>
 
<body>
 <div id="invertedtabsline">&nbsp;</div>
 <div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="/jscss/" title="主頁"><span>主 頁</span></a></li>
<li><a href="/jscss/" title="酷站"><span>酷 站</span></a></li>
<li id="current"><a href="/jscss/" title="PNG"><span>PNG</span></a></li>
<li><a href="/jscss/" title="GIF"><span>GIF</span></a></li>	
<li><a href="/jscss/" title="代碼"><span>代 碼</span></a></li>
<li><a href="/jscss/" title="色彩"><span>色 彩</span></a></li>
<li><a href="/jscss/" title="便利"><span>便 利</span></a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2012-10-25

[收藏][報錯][返回列表]

相關菜單導航特效：

欧美日韩精品在线,国内精品久久久久久久久,一级毛片恃级毛片直播,清纯唯美亚洲综合欧美色

極酷的CSS導航特效_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些