標籤：block 實現 char play style set bond round 9.png
CSS3 :target偽類用來改變頁面中錨連結URL所指向的ID樣式
程式碼範例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>target偽類實現Tab轉場效果</title> <style type="text/css"> p{ bond:li; } .tablist { position:relative; margin:50px auto; min-height:200px; } /* this example style begin */ .tab_content { position: absolute;/*set content box as absolute*/ 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 { 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; } .tablist { position:relative; margin:50px auto; min-height:200px; } </style></head><body><p>target偽類實現Tab轉場效果</p><div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">標籤一</a></li> <li><a href="#tab2">標籤二</a></li> <li><a href="#tab3">標籤三</a></li> </ul> <div id="tab1" class="tab_content"> <p>假如生活欺騙了你</p>不要悲傷，不要哭泣<br />快樂的日子總會來的 </div> <div id="tab2" class="tab_content"> 犯我中華著，雖遠必誅! </div> <div id="tab3" class="tab_content"> <p style="font-size:24px;">你在橋上看風景</p> <p>看風景的人正在看你</p> </div></div></body></html>
效果：
點擊標籤1
點擊標籤2
點擊標籤3
CSS3屬性之 target偽類實現Tab轉場效果
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
