本文介紹的是一個非常不錯的CSS tab 標簽頁導航菜單效果，代碼簡潔，兼容各種瀏覽器，最關鍵的是：通過學習實例里面的思路，我們很容易做出各種漂亮的 tab 效果，希望對初學者有幫助！ 先看看抓圖：  -------------------------------------------------------------- 點此瀏覽示例文件-------------------------------------------------------------- CSS:
-
-
<style type="text/css">
-
<!--
-
body {
-
margin:0;
-
padding:0;
-
font: bold 11px/1.5em Verdana;
-
}
-
img {
-
border: none;
-
}
-
-
/*- Menu Tabs 1--------------------------- */
-
#tabs1 {
-
float:left;
-
width:100%;
-
background:#F4F7FB;
-
font-size:93%;
-
line-height:normal;
-
border-bottom:1px solid #BCD2E6;
-
}
-
#tabs1 ul {
-
margin:0;
-
padding:10px 10px 0 50px;
-
list-style:none;
-
}
-
#tabs1 li {
-
display:inline;
-
margin:0;
-
padding:0;
-
}
-
#tabs1 a {
-
float:left;
-
background:url("tableft1.gif") no-repeat left top;
-
margin:0;
-
padding:0 0 0 4px;
-
text-decoration:none;
-
}
-
#tabs1 a span {
-
float:left;
-
display:block;
-
background:url("tabright1.gif") no-repeat right top;
-
padding:5px 15px 4px 6px;
-
color:#627EB7;
-
}
-
/* Commented Backslash Hack hides rule from IE5-Mac \*/
-
#tabs1 a span {float:none;}
-
/* End IE5-Mac hack */
-
#tabs a:hover span {
-
color:#627EB7;
-
}
-
#tabs1 a:hover {
-
background-position:0% -42px;
-
}
-
#tabs1 a:hover span {
-
background-position:100% -42px;
-
}
-
#tabs1 #current a {
-
background-position:0% -42px;
-
}
-
#tabs1 #current a span {
-
background-position:100% -42px;
-
}
-
-->
-
</style>
-
HTML:
-
-
<div id="tabs1">
-
<ul>
-
<li id="current"><a href="Home.html"><span>Home</span></a></li>
-
<li><a href="Products.html"><span>Products</span></a></li>
-
<li><a href="Services.html"><span>Services</span></a></li>
-
<li><a href="Support.html"><span>Support</span></a></li>
-
<li><a href="Order.html"><span>Order</span></a></li>
-
<li><a href="News.html"><span>News</span></a></li>
-
<li><a href="About.html"><span>About</span></a></li>
-
</ul>
-
</div>
-
背景圖片：   代碼簡潔，又兼容各種瀏覽器，仔細讀讀代碼，相信會有很大收獲！如果您原創(chuàng)或者收集到更漂亮的效果，記得共享喲！ |
