下载地址：http://download.csdn.net/detail/cometwo/9393614

html文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS3外观美丽淡入淡出Tab菜单演示</title>

        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

    </head>

    <body>

        <div style="text-align:center;clear:both;">

            <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

            <script src="/follow.js" type="text/javascript"></script>

        </div>

        <article class="tabs">

            <input checked id="one" name="tabs" type="radio">

            <label for="one">Tab One</label>

            <input id="two" name="tabs" type="radio" value="Two">

            <label for="two">Tab Two</label>

            <input id="three" name="tabs" type="radio">

            <label for="three">Tab Three</label>

            <input id="four" name="tabs" type="radio">

            <label for="four">Tab Four</label>

            <div class="panels">

                <div class="panel">

                    <h2>This is Panel One</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

                </div>

                <div class="panel">

                    <h2>This is Panel Two</h2>

                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

                </div>

                <div class="panel">

                    <h2>This is Panel Three</h2>

                    <p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

                </div>

                <div class="panel">

                    <h2>This is Panel Four</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

                    <p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

                </div>

            </div>

        </article>

    </body>

</html>

CSS文件

body {

    font-family: Cambria, Arial;

    background: #333;

}

    .tabs {

        width: 100%;

        max-width: 600px;

        border: 1px solid black;

        margin: 50px auto;

    }

        input {

            opacity: 1;

        }

        label {

            cursor: pointer;

            background: yellow;

            color: red;

            border-radius: 5px 5px 0 0;

            padding: 1.5% 3%;

            float: left;

            margin-right: 2px;

            font: italic 1em cambria;

        }

            label:hover {

                background: blue;

            }

            input:checked + label {

                background: palegreen;

                color: blueviolet;

            }

        .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,

        .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),

        .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),

        .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {

            opacity: 1;

            -webkit-transition: .9s;

        }

        .panels {

            float: left;

            clear: both;

            position: relative;

            width: 100%;

            background: #fff;

            border-radius: 0 10px 10px 10px;

            min-height: 315px;

        }

            .panel {

                width: 100%;

                opacity: 0;

                position: absolute;

                background: #fff;

                border-radius: 0 10px 10px 10px;

                padding: 4%;

                box-sizing: border-box;

            }

                .panel h2 {

                    margin: 0;

                    font-family: Arial;

                }

史上最牛逼的纯CSS实现tab选项卡，闪瞎你的狗眼的更多相关文章

  1. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  2. 史上最牛逼的文件bom头清除代码，万能检测清除php，js等等

    做php开发,经常部分uft8的php文件因BOM头不同导致各种错误和错位.网上搜到的大部分所谓的去处bom工具都是2货,没有能用的.下面的一段代码,请复制到一个php文件里,然后上传到你的网站根目录 ...

  3. .net操作数据库，史上最牛逼的方法,你见过这种方法吗

    免费分享给大家.下载地址在最下面. C# code   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  4. 【转载】可能是世界上最牛逼的网站统计程序——Matomo

    大家做网站的时候一般都会使用网站统计程序.通常,国内网站会使用百度统计.CNZZ等,而国外网站则会使用Google Analytics等统计.国内的统计程序普遍功能不太丰富,且响应速度一般.Googl ...

  5. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  6. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  7. CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  8. SQL才是世界上最牛逼的语言！

    身处互联网行业,SQL 可能是你需要掌握的核心技能之一. 最早的时候,SQL 作为一门查询数据库的语言,是程序员的必备技能,运维.开发.Web 以及数据等从业人员都需要用到 SQL,毕竟只有查询到正确 ...

  9. 史上最全的HTML、CSS知识点总结，浅显易懂。

    来源于:http://blog.csdn.net/qiushi_1990/article/details/40260447 一,html+css基础1-1Html和CSS的关系学习web前端开发基础技 ...

随机推荐

  1. AndroidManifest.xml文件详解（permission-group）

    http://blog.csdn.net/think_soft/article/details/7578760 语法(SYNTAX): <permission-groupandroid:desc ...

  2. Container With Most Water（LintCode）

    Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a poi ...

  3. 深度学习应用系列（二） | 如何使用keras进行迁移学习，以训练和识别自己的图片集

    本文的keras后台为tensorflow,介绍如何利用预编译的模型进行迁移学习,以训练和识别自己的图片集. 官网 https://keras.io/applications/ 已经介绍了各个基于Im ...

  4. HDU 6118 2017百度之星初赛B 度度熊的交易计划（费用流）

    度度熊的交易计划 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  5. 第5天：Ansible-Playbook

    Ansible中的每个模块专注于某一方面的功能.虽然每个模块实现的功能都比较简单,但是,将各个模块结合起来就可以实现比较复杂的功能.在Ansible中,将各个模块组合起来的文件是一个YAML格式的配置 ...

  6. Python中sorted函数的用法(转)

    [Python] sorted函数 我们需要对List.Dict进行排序,Python提供了两个方法 对给定的List L进行排序, 方法1.用List的成员函数sort进行排序,在本地进行排序,不返 ...

  7. 【BZOJ 3262】 3262: 陌上花开 （CDQ分治）

    3262: 陌上花开 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A ...

  8. VB查询数据库之写入数据库——机房收费系统总结（三）

    在机房收费系统中,新注册的用户,更改的密码,上机下级记录,上机收费记录等等都要写入数据库,这样,后面的查询才能生效.像数据库中写入数据,首先,找到你要写入数据的数据库中的表,在表中建立新的行,让后再把 ...

  9. [BZOJ4013][HNOI2015]实验比较(树形DP)

    4013: [HNOI2015]实验比较 Time Limit: 5 Sec  Memory Limit: 512 MBSubmit: 756  Solved: 394[Submit][Status] ...

  10. 【状压dp】CDOJ1608 暑假集训

    裸的状压的话,很显然……但有一个强大的优化. 就是在枚举决策的时候,固定第一个空位置.可以证明,这样状态数没有减少,但是降低了很多重复访问. 因为你在枚举的时候,总是可以划分为包含第一个空位置的3个位 ...