Tab页用CSS3实现


将Tab按钮变成了两个，并且移动到了上方。为了移动到上方，增加了一个<div id=tabbody>包含了两个tab内容，两个tab内容采用绝对定位，而tabbody采用了相对定位，这样刚好位于和两个tab按钮之下。

html代码如下：

[html]

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>HTML5 tab</title>  
  6.     <link rel="stylesheet" href="tab.css" type="text/css" />  
  7.   </head>  
  8.   <body>  
  9.     <div class="tablist">  
  10.       <ul class="tabmenu">  
  11.     <li><a href="#tab1">标签一</a></li>  
  12.     <li><a href="#tab2">标签二</a></li>  
  13.       </ul>  
  14.       <div id="tabbody" class="tab_body">  
  15.     <div id="tab1" class="tab_content">tab1 content</div>  
  16.     <div id="tab2" class="tab_content">tab2 content</div>  
  17.       </div>  
  18.     </div>   
  19.   </body>  
  20. </html>  
css代码如下：

[css]

  1. .tablist {  
  2.     position:relative;  
  3.     margin:50px auto;  
  4.     min-height:200px;  
  5. }  
  6.   
  7. .tab_body {  
  8.     position:relative;  
  9.     top:30px;  
  10.     width:600px;  
  11.     height:200px;  
  12. }  
  13.   
  14. /* this example style begin */  
  15. .tab_content {  
  16.     position: absolute;/*set content box as absolute*/  
  17.     /* content style begin*/  
  18.     width:600px;  
  19.     height:170px;  
  20.     padding:15px;  
  21.     border:1px solid #91a7b4;  
  22.     border-radius:3px;  
  23.     box-shadow:0 2px 3px rgba(0,0,0,0.1);  
  24.     font-size:1.2em;  
  25.     line-height:1.5em;  
  26.     color:#666;  
  27.     background:#fff;  
  28. }  
  29.   
  30.   
  31. #tab1:target, #tab2:target, #tab3:target {  
  32.     z-index: 1;  
  33. }  
  34.   
  35.   
  36. /* tabmenu style */  
  37. .tabmenu {  
  38.     position:absolute;  
  39.     /*top:100%;*/  
  40.     margin:0;  
  41. }  
  42.   
  43. .tabmenu li{  
  44.     display:inline-block;  
  45. }  
  46.   
  47. .tabmenu li a {  
  48.     display:block;  
  49.     padding:5px 10px;  
  50.     margin:0 10px 0 0;  
  51.     border:1px solid #91a7b4;  
  52.     border-radius:0 0 5px 5px;  
  53.     background:#e3f1f8;  
  54.     color:#333;  
  55.     text-decoration:none;  
  56. }  

相关内容