下载地址：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. python3.6下安装结巴分词需要注意的地方

    近期,在安装结巴分词的时候遇到一些问题,纠结了好一阵,跟大家分享下,希望能有所帮助.先说下安装环境: windows7, 64位系统 python3.6,python3.5在结巴分词的官方github ...

  2. 第3天：YAML语法

    YAML是一种可读性很强的数据格式语言.正是由于YAML良好的可读性,其广泛引用于软件配置中. 语法规则 YAML文件中的第一行为"---",表示这是一个YAML文件: YAML中 ...

  3. Java-并发入门

    本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ Java中实现多线程的方法 实现Runnable接口 实现Runnable接口里的run()方法 ...

  4. 【动态规划】【滚动数组】【搜索】Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) D. Field expansion

    显然将扩张按从大到小排序之后,只有不超过前34个有效. d[i][j]表示使用前i个扩张,当length为j时,所能得到的最大的width是多少. 然后用二重循环更新即可, d[i][j*A[i]]= ...

  5. 83.（01背包）CYD刷题

    3130 CYD刷题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 下午,CYD要刷题了,已知CY ...

  6. Visual Studio Image Library现在带矢量图标了

    Visual Studio Image Library是微软提供的一套不可多得的高质量图标库(Visual Studio中自己使用的),我在自己写的一些小程序中一直有用到它们.今天天想把之前的程序中的 ...

  7. WebService基于SoapHeader实现安全认证（二）

    支持通过Http请求方法调用webservice,同时支持SoapHeader验证. using Globalegrow.Common; using Globalegrow.Model; using ...

  8. XMPP资源绑定(Resource Binding)与单台设备登录控制

    原文:http://blog.csdn.net/brasbug/article/details/26353511 一个XMPP的账号由三部分组成: 用户名(user/node),域名(domain)和 ...

  9. TWinHttp之二

    TWinHttp之二 function EncodeParams(strings: TStrings): SockString;var i: Integer; S: string;begin for ...

  10. NSIS安装包制作

    6)闪屏界面,可以在源代码中加入下列代码即可: A.普通效果 以下是代码片段: Function .onInit SetOutPath $TEMP File /oname=spltmp.bmp &qu ...