找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3选项卡

2018-12-14 分类：CSS 阅读(763) 评论(0)
游戏开发前端
前端游戏开发 技能树
游戏前端开发必备

一，:check伪类实现tab切换选项卡

知识点：
用.radio:checked + .tab-header 指定当前tab头的样式
用.radio:checked + .tab-header + .tab-content 指定当前tab内容块的样式
+选择器，选择紧跟在某个指定元素后面的另一个指定的元素查看详情

css3tab选项卡

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>css3选项卡</title>
        <style type=”text/css”>
            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                background: #58596b;
            }
            .container {
                width: 800px;
                height: 400px;
                margin: 100px auto;
                background: #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .tab-wrapper {
                position: relative;
                width: 800px;
                height: 60px;
                background: #33344a;
            }
            .tab-handler {
                position: relative;
                z-index: 2;
                display: block;
                float: left;
                height: 60px;
                line-height: 60px;
                padding: 0 40px;
                font-size: 16px;
                transition: 0.3s;
                transform: scale(0.9);
                color: #717181;
            }
            .tab-content {
                position: absolute;
                top: 60px;
                left: 0;
                width: 740px;
                padding: 30px;
                color: #999;
                font-size: 14px;
                line-height: 24px;
                background: #fff;
                opacity: 0;
                transition: transform 0.5s, opacity 0.7s;
                transform: translateY(20px);
            }
            .tab-radio {
                display: none;
            }
            .tab-radio:checked + .tab-handler {
                color: #fff;
                background: #e74c3c;
                transform: scale(1);
            }
            .tab-radio:checked + .tab-handler + .tab-content {
                visibility: visible;
                opacity: 1;
                transform: scale(1);
            }
        </style>
    </head>
    <body>
        <div class=”container”>
            <div class=”tab-wrapper”>
                <!– tab section 1 –>
                <input
                    type=”radio”
                    class=”tab-radio”
                    name=”tab-radio”
                    id=”tab-radio-1″
                    checked
                />
                <label for=”tab-radio-1″ class=”tab-handler”>水浒传</label>
                <div class=”tab-content tab-content-1″>
                    《水浒传》。按120回本计，前70回讲述各个好汉上梁山，后50回主要为宋江全伙受招安为朝廷效力，以及被奸臣所害。
                </div>
                <!– tab section 2 –>
                <input
                    type=”radio”
                    class=”tab-radio”
                    name=”tab-radio”
                    id=”tab-radio-2″
                />
                <label for=”tab-radio-2″ class=”tab-handler”>三国演义</label>
                <div class=”tab-content tab-content-1″>
                    《三国演义》元末明初家罗贯中，是中国第一部长篇章回体历史演义。描写了从东汉末年到西晋初年之间近105年的历史风云。
                </div>
                <!– tab section 3 –>
                <input
                    type=”radio”
                    class=”tab-radio”
                    name=”tab-radio”
                    id=”tab-radio-3″
                />
                <label for=”tab-radio-3″ class=”tab-handler”>三国演义</label>
                <div class=”tab-content tab-content-3″>
                    《西游记》明代家吴承恩所创作的中国古代第一部浪漫主义的长篇神魔。主要描写了唐朝太宗贞观年间孙悟空、猪八戒、沙僧、白龙马四弟子保护唐僧西行取经，沿途历经九九八十一难，一路降妖伏魔，化险为夷，最后到达西天，取得真经的故事。
                </div>
                <!– tab section 4 –>
                <input
                    type=”radio”
                    class=”tab-radio”
                    name=”tab-radio”
                    id=”tab-radio-4″
                />
                <label for=”tab-radio-4″ class=”tab-handler”>三国演义</label>
                <div class=”tab-content tab-content-4″>
                    《红楼梦》四大名著之首，清代作家曹雪芹创作的章回体长篇
                    。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本[2]
                    ，定名《红楼梦》。亦有版本作《金玉缘》。
                </div>
            </div>
        </div>
    </body>
</html>

二，:target伪类实现Tab切换选项卡
转载地址

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>选项卡:target</title>
    </head>
    <style type=”text/css”>
        .tab-wrapper {
            position: relative;
            margin: 50px auto;
            min-height: 200px;
        }
        .tab-content {
            position: 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;
        }
    </style>
    <body>
        <div class=”tab-wrapper”>
            <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”>标签一</div>
            <div id=”tab2″ class=”tab-content”>标签二</div>
            <div id=”tab3″ class=”tab-content”>标签三</div>
        </div>
    </body>
</html>
游戏开发是前端还是后端
游戏引擎开发是前端
vr游戏开发和web前端
赞(0)
前端开发者 » 前端开发CSS3选项卡
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论