• 纯css3实现tab选项卡


    <!doctype html>
    <html>
    <head>
        <title>Welcome</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="format-detection" content="telephone=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            *      { padding: 0px; margin: 0px; outline: none; }
            article { border-top: none; display: -webkit-box; height: 100%; position: relative; width:300px; margin:50px auto 0; }
            article > section:nth-child(1) a { left:   0px; position: absolute; }
            article > section:nth-child(2) a { left: 101px; position: absolute; }
            article > section:nth-child(3) a { left: 202px; position: absolute; }
            article > section { width: 304px; padding: 10px 0; position: absolute; left: 0px;  }
            article > section a { color: #333; text-decoration: none; display: block; list-style: none; -webkit-box-flex:1; font-size: 12px; line-height: 30px; text-align: center; background: #f1f1f1; border: 1px solid #ccc; width: 100px; z-index: 100;}
            article > section > section { top:41px; position: absolute; background: #fff; border:1px solid #ccc; border-top: none; padding: 10px 0; }
            article > section p { font: 12px/1.7 simsun; padding: 0 10px; text-indent: 2em; }
            section:target { z-index: 99; }
            section:target a { background: #fff; border-bottom: none; }
        </style>
    </head>
    <body>
            <article>
                <section id="tab1">
                    <a href="#tab1">菜单一</a>
                    <section>
                        <p>榜妹:#标配问题#拾文化是哪一天开始运营的?现在有多少关注者?拾文化团队有多少人?大家怎么分工呢?</p>
                        <p>拾文化:拾文化从2012年3月开始运营,现在总共有50万左右关注者,团队不大,12个人,以编辑为主,还有技术一名、设计两名、BD两名,以及打杂的我。</p>
                        <p>榜妹:#标配问题#从开始运营到现在,拾文化的内容模式经历过几个发展阶段,粉丝出现过几次增长高峰,是哪些原因呢?</p>
                    </section>
                </section>
                <section id="tab2">
                    <a href="#tab2">菜单二</a>
                    <section>
                        <p>拾文化:拾文化从2012年3月开始运营,现在总共有50万左右关注者,团队不大,12个人,以编辑为主,还有技术一名、设计两名、BD两名,以及打杂的我。</p>
                        <p>榜妹:#标配问题#拾文化是哪一天开始运营的?现在有多少关注者?拾文化团队有多少人?大家怎么分工呢?</p>
                        <p>榜妹:#标配问题#从开始运营到现在,拾文化的内容模式经历过几个发展阶段,粉丝出现过几次增长高峰,是哪些原因呢?</p>
                    </section>
                </section>
                <section id="tab3">
                    <a href="#tab3">菜单三</a>
                    <section>
                        <p>榜妹:#标配问题#从开始运营到现在,拾文化的内容模式经历过几个发展阶段,粉丝出现过几次增长高峰,是哪些原因呢?</p>
                        <p>拾文化:拾文化从2012年3月开始运营,现在总共有50万左右关注者,团队不大,12个人,以编辑为主,还有技术一名、设计两名、BD两名,以及打杂的我。</p>
                        <p>榜妹:#标配问题#拾文化是哪一天开始运营的?现在有多少关注者?拾文化团队有多少人?大家怎么分工呢?</p>
                    </section>
                </section>
            </article>
    </body>
    </html>
  • 相关阅读:
    洛谷 P1231 教辅的组成
    BZOJ 2190: [SDOI2008]仪仗队
    Codeforces GYM 100741A . Queries
    COGS 1298. 通讯问题
    洛谷 P2604 [ZJOI2010]网络扩容
    codevs 1227 方格取数 2
    codevs 1004 四子连棋
    洛谷 P2319 [HNOI2006]超级英雄
    洛谷 P2153 [SDOI2009]晨跑
    插入排序
  • 原文地址:https://www.cnblogs.com/y327595826/p/3956061.html
Copyright © 2020-2023  润新知