下载地址：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. 234. Palindrome Linked List【Easy】【判断链表是否回文】

    Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2 Output: false ...

  2. 【Numpy】python机器学习包Numpy基础知识学习

    一.安装:在之前的博客中已经写过:http://www.cnblogs.com/puyangsky/p/4763234.html 二.python数组切片知识: python中序列类有list.str ...

  3. 打开eclipse 时出现Failed to load the JNIshared libraryd的解决方式

    由于电脑重装系统,所以电脑的jdk,与eclipse需要重新配置,今天配置完成jdk之后,打开eclipse出现了Failed to load the JNIshared libraryd的错误,如下 ...

  4. 最优贸易 NOIP 2009 提高组 第三题

    题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分 为双向通行的道路 ...

  5. [BZOJ4819][SDOI2017]新生舞会(分数规划+费用流,KM)

    4819: [Sdoi2017]新生舞会 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1097  Solved: 566[Submit][Statu ...

  6. BZOJ 2395 [Balkan 2011]Timeismoney（最小乘积生成树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2395 [题目大意] 给出一张无向图,每条边上有a,b两个值,求生成树, 使得suma* ...

  7. Spring AOP动态代理

    出现org.springframework.aop.framework.ProxyFactoryBean cannot be cast to 错误 在类型转换的时候, 调用getObject()方法, ...

  8. python的高阶函数

    函数式编程的一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数. 高阶函数 定义:一个函数就可以接收另一函数作为参数,这种函数就称之为高阶函数. map/reduce Python ...

  9. 技术分享：杂谈如何绕过WAF（Web应用防火墙）（转）

    0×01开场白 这个议题呢,主要是教大家一个思路,而不是把现成准备好的代码放给大家. 可能在大家眼中WAF(Web应用防火墙)就是"不要脸"的代名词.如果没有他,我们的" ...

  10. 使用Python SocketServer快速实现多线程网络服务器

    Python SocketServer使用介绍 1.简介: SocketServer是python的一个网络服务器框架,可以减少开发人员编写网络服务器程序的工作量. SocketServer总共有4个 ...