论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > HTML教程
Tag:初学,入门,文字,链接,table,表单,框加,多媒体,标签,视频教程

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

文章类别:HTML | 发表日期:2012-6-27 15:02:46

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


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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>21视频教程网</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>

    我们一起运用以上显示出来的代码赶紧试一试吧!感谢大家的支持!
朋友们,废话就不多说了,一起来看看下面的代码案例:
视频教程列表
文章教程搜索
 
HTML推荐教程
HTML热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058