zoukankan      html  css  js  c++  java
  • CSS3 :target伪类实现Tab切换效果

    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代码

    <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">欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
        <!-- end tab1 content --></div>
        <div id="tab2" class="tab_content"><p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>最新Q群:50063010<br />爱设计,爱分享——设计达人(http://www.shejidaren.com)
        <!-- end tab2 content--></div>
        <div id="tab3" class="tab_content"><p style="font-size:24px;">高质量设计文章分享平台</p><p>欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢</p>
        <!-- end tab3 content--></div>
    </div>
  • 相关阅读:
    DateGridView 分页显示
    DataGridView 隔行显示不同的颜色
    DataGridview 绘制行序号
    DataGrridView 当前行显示不同颜色
    右键删除行
    【bzoj2763】[JLOI2011]飞行路线 分层图最短路
    【bzoj1143】[CTSC2008]祭祀river Floyd+网络流最小割
    【bzoj1029】[JSOI2007]建筑抢修 贪心+堆
    【bzoj1054】[HAOI2008]移动玩具 Bfs
    【bzoj1911】[Apio2010]特别行动队 斜率优化dp
  • 原文地址:https://www.cnblogs.com/xiaomifeng/p/6889634.html
Copyright © 2011-2022 走看看