极酷的CSS导航特效

2024-09-05 12:19:55

字体：大中小

来源：转载

供稿：网友

极酷的CSS导航特效，类似带有圆角的效果，视觉效果很冲击，精致小巧型，希望大家喜欢。

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312"><head><title>极酷的CSS导航特效</title><meta http-equiv="Content-Type" content="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;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://www.codefans.net/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://www.codefans.net/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{ background-color: #d50509;}#invertedtabsline{clear: both;padding: 0;width: 100%;height: 8px;line-height: 8px;background: #8b0000;border-bottom: 1px solid #fff; }</style></head><body> <div id="invertedtabsline"> </div> <div id="invertedtabs"><ul><li style="margin-left: 1px"><span>主 页</span></li><li><span>酷 站</span></li><li id="current"><span>PNG</span></li><li><span>GIF</span></li>	<li><span>代 码</span></li><li><span>色 彩</span></li><li><span>便 利</span></li></ul></div><br style="clear: left" /></body></html>

上一篇：水晶按钮式的CSS导航菜单

下一篇：非常大气漂亮的CSS导航栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注