CSS样式

.tablist {
   position:relative;margin:50px auto;min-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;}

HTML代码

     
    
      
        
       
标签一
        
       
标签二
        
       
标签三
    
      
    
      
       欢迎加设计达人Q群：50063010
       
设计达人以原创和分享一些高质量的设计文章为主，希望喜欢！    
       
      
    
      
       
本Tab切换效果纯CSS3制作，无任何JavaScript
最新Q群：50063010
       
爱设计，爱分享——设计达人（http://www.shejidaren.com）    
       
      
    
      
       
高质量设计文章分享平台
       
欢迎加设计达人Q群：50063010
设计达人以原创和分享一些高质量的设计文章为主，希望喜欢