极酷的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; /*www.mb5u.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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些