本文學習自下面的一篇文章，但是做了修改。
http://www.shejidaren.com/examples/css3-target/css3-target.html
將Tab按鈕變成了兩個，並且移動到了上方。為了移動到上方，增加了一個<div id=tabbody>包含了兩個tab內容，兩個tab內容採用絕對位置，而tabbody採用了相對定位，這樣剛好位於和兩個tab按鈕之下。
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代碼如下：
.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;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
