纯CSS实现Tab切换标签效果代码

本文实例讲述了纯CSS实现Tab切换标签效果代码。分享给大家供大家参考。具体如下：

这是一款纯CSS实现的Tab简洁版，很不错的效果，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/

具体代码如下：

复制代码代码如下:!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html XMlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
title> CSS_Tab简洁版/title>
style type="text/css">
body{ margin:0; font-Size:12px; background:#666; }
#box{ width:400px; height:300px; margin:100px auto 0; }
#tab_nav{ margin:0; padding:0; height:25px; line-height:24px; }
#tab_nav li{ float:left; margin:0 3px; list-style: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 href="#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网页设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！