極酷的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   class="70qarhlowxag"   id="invertedtabsline"> </div> <div   class="70qarhlowxag"   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導航欄