HTMl教程：实现个人账户管理tab导航特效代码_HTML教程_H5之家

HTMl教程：实现个人账户管理tab导航特效代码

朋友们，废话就不多说了，一起来看看下面的代码案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>教程网</title>
<style type="text/css">
a,a:visited,a:hover,a:active{
text-decoration:none;
}
.tabred{
list-style:none;
width:600px;
padding-left:20px;
height:27px;
margin:10px auto;
border-bottom:2px solid #AD0007;
}
.tabred li{
float:left;
height:26px;
line-height:24px;
margin-right:5px;
padding:0 12px;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
font-size:14px;
list-style:none;
background:-moz-linear-gradient(top, #fff 0, #f3f3f3 100%);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f3f3f3));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType="0");
background:linear-gradient(top, #fff 0%, #f3f3f3 100%);
border-radius:2px 2px 0 0;
-moz-border-radius:2px 2px 0 0;
-webkit-border-radius:2px 2px 0 0;
}
.tabred li.current{
border-color:#c30008;
background:-moz-linear-gradient(-90deg, #d5000a 0, #ad0007 100%);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#d5000a), to(#ad0007));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5000a', endColorstr='#ad0007', GradientType="0");
background:linear-gradient(top, #d5000a 0, #ad0007 100%);
}
.tabred li a,.tabred li a:visited{
color:#666;
}
.tabred li a:hover,.tabred li a:active{
color:#666;
}
.tabred li.current a,.tabred li.current a:visited{
font-weight:bold;
color:#fff;
}
</style>
</head>
<body>
<ul class="tabred">
<li><a href="#">我是买家</a></li>
<li><a href="#">我是卖家</a></li>
<li class="current"><a href="#">我的帐户</a></li>
<li><a href="#">账户管理</a></li>
<li><a href="#">我是自适应的</a></li>
</ul>
</body>
</html>

我们一起运用以上显示出来的代码赶紧试一试吧！感谢大家的支持！朋友们，废话就不多说了，一起来看看下面的代码案例：