下载地址：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. django-BBS（1）

    1.首先分析BBS的设计需要,然后设计相应的数据库.填写在models.py 中 2.修改setting.py中的内容: a.将appname加入INSTALLED_APP中 b.修改DATABASE ...

  2. Hibernate + Oracle 创建自增序列ID

    1.创建自增序列 2.对ID创建触发器 3.Userinfo.hbm.xml使得<generator class="increment"> 序列: MAXVALUE I ...

  3. Web开发中的路径问题总结

    原文地址:http://zzqrj.iteye.com/blog/806909 路径问题在Web开发中算是令人比较蛋疼的问题,尤其是用相对地址时,同样的代码,在不同的目录结构中竟然会出现有对有错的结果 ...

  4. RabbitMQ (十三) 集群+单机搭建(window)

    拜读了网上很多前辈的文章,对RabbitMQ的集群有了一点点认识. 好多文章都说到,RabbitMQ的集群分为普通集群和镜像集群,有的还加了两种:单机集群和主从集群. 我看来看去,看了半天,怎么感觉, ...

  5. python datetime处理时间(转)

    Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块,它提供 的接口与C标准库time.h基本一致.相比于time模块,datetime模块的接 ...

  6. Java的锁研究

    Lock和synchronized     JDK1.5以后,在锁机制方面引入了新的锁-Lock,在网上的说法都比较笼统,结合网上的信息和我的理解这里做个总结.     java现有的锁机制有两种实现 ...

  7. jquery checkbox用法汇总

    来源:http://www.jb51.net/article/75717.htm 1.全选 ? 1 2 3 $("#btn1").click(function(){ $(" ...

  8. 【预处理】Codeforces Round #407 (Div. 2) C. Functions again

    考虑枚举每个子串开头的位置,然后答案转化成询问这个位置之后 哪个位置的前缀和 - 这位置的前缀和 最大(当然是已经把绝对值和正负的情况处理好了,可以发现按奇偶,这个序列只有两种情况),只需要预处理这两 ...

  9. 找出最小元素 Exercise07_09

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出最小元素 * */ public class Exercise07_0 ...

  10. ORADEBUG DOC 12.1.0.2

     https://berxblog.blogspot.com/2015/01/oradebug-doc-12102.html   this is just an online docu of ORAD ...