將Tab按鈕變成了兩個，並且移動到了上方。為了移動到上方，增加了一個<div id=tabbody>包含了兩個tab內容，兩個tab內容采用絕對定位，而tabbody采用了相對定位，這樣剛好位於和兩個tab按鈕之下。
html代碼如下：
[html]
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>HTML5 tab</title>
- <link rel="stylesheet" href="tab.css" type="text/css" />
- </head>
- <body>
- <div class="tablist">
- <ul class="tabmenu">
- <li><a href="#tab1">標簽一</a></li>
- <li><a href="#tab2">標簽二</a></li>
- </ul>
- <div id="tabbody" class="tab_body">
- <div id="tab1" class="tab_content">tab1 content</div>
- <div id="tab2" class="tab_content">tab2 content</div>
- </div>
- </div>
- </body>
- </html>
css代碼如下：
[css]
- .tablist {
- position:relative;
- margin:50px auto;
- min-height:200px;
- }
-
- .tab_body {
- position:relative;
- top:30px;
- width:600px;
- height:200px;
- }
-
- /* this example style begin */
- .tab_content {
- position: absolute;/*set content box as absolute*/
- /* content style begin*/
- width:600px;
- height:170px;
- padding:15px;
- border:1px solid #91a7b4;
- border-radius:3px;
- box-shadow:0 2px 3px rgba(0,0,0,0.1);
- font-size:1.2em;
- line-height:1.5em;
- color:#666;
- background:#fff;
- }
-
-
- #tab1:target, #tab2:target, #tab3:target {
- z-index: 1;
- }
-
-
- /* tabmenu style */
- .tabmenu {
- position:absolute;
- /*top:100%;*/
- margin:0;
- }
-
- .tabmenu li{
- display:inline-block;
- }
-
- .tabmenu li a {
- display:block;
- padding:5px 10px;
- margin:0 10px 0 0;
- border:1px solid #91a7b4;
- border-radius:0 0 5px 5px;
- background:#e3f1f8;
- color:#333;
- text-decoration:none;
- }
