css Tab选项卡,csstab选项卡

css Tab选项卡,csstab选项卡

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>css-tab切换</title>
<style>
<!–
*{
margin:0;padding:0;list-style:none;font-size:12px;}

#content{
width:300px;margin:10px auto;position:relative;border:1px solid
#666;}

ul{
width:20px;height:100px;position:absolute;right:5px;top:100px;}

ul li{height:33px;}

ul li a{
display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#000;background:#ccc;text-decoration:none;}

ul li a:hover{color:#fff;background:#666;}

#tabTxt{height:300px;overflow:hidden;}

#a1,#a2,#a3{width:300px;height:300px;}
–>
</style>
</head>
<body>
<div id=”content”>
<ul>
  <li><a href=”#a1″>1</a></li>
  <li><a href=”#a2″>2</a></li>
  <li><a href=”#a3″>3</a></li>
</ul>
<div id=”tabTxt”>
  <div id=”a1″ style=”background:#f00″>
  </div>
  <div id=”a2″ style=”background:#080″>
  </div>
  <div id=”a3″ style=”background:#009;”>
  </div>
</div>
</div>
</body>
</html>

Tab选项卡,csstab选项卡 !DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

相关文章