本文实例讲述了纯CSS实现Tab切换标签效果代码。分享给大家供大家参考。具体如下：
这是一款纯CSS实现的Tab简洁版，很不错的效果，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/
具体代码如下：
@H_ 406 _20@复制代码
代码如下:<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN"
"http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Tab简洁版</title>
<style type="text/css">
body{m arg in:0; font- Size: 12px; background: # 666;}
#box{width:400px; h ei ght:300px; mar gin :100px auto 0;}
#tab_nav{margin:0; padding:0; height:25px; line-height:24px;}
#tab_nav li{float:left; margin:0 3px; list -s tyle:none; border:1px solid #999; border-bottom:none; height:24px; width:60px; text-align: center ; background:#FFF;}
a{font:bold 14px/24px " 微软雅黑 ", Verdana, Arial, Helvetica, sans-serif; color:green; text-decoration:none;}
a:hover{color: red ;}
#tab_content{width:398px; height:273px; border:1px solid #999; font:bold 4em/273px " 微软 雅黑", Verdana, Arial, Helvetica, sans-serif; text-align:center; background:#FFF; overflow:hidden;}
#t_1,#t_2,#t_3{width:100%; height:273px;}
</style>
</head>
<body>
<div id="box">
<ul id="tab_nav">
<li><a hr ef="#t_1">tab_1</a></li>
<li><a href="#t_2">tab_2</a></li>
<li><a href="#t_3">tab_3</a></li>
</ul>
<div id="tab_content">
<div id="t_1">tab_壹</div>
<div id="t_2">tab_贰</div>
<div id="t_3">tab_叁</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的css网页设计有所帮助。
总结
以上是 为你收集整理的 纯CSS实现Tab切换标签效果代码 全部内容，希望文章能够帮你解决 纯CSS实现Tab切换标签效果代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于纯CSS实现Tab切换标签效果代码的详细内容...