本文介绍的是一个非常不错的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>
-
背景图片：   代码简洁，又兼容各种浏览器，仔细读读代码，相信会有很大收获！如果您原创或者收集到更漂亮的效果，记得共享哟！ |
