下载地址：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. CodeForces 738C Road to Cinema

    二分答案. 油量越多,显然通过的时间越少.可以二分找到最小的油量,可以在$t$时间内到达电影院. 一个油箱容量为$v$的车通过长度为$L$的路程需要的最小时间为$max(L,3*L-v)$.计算过程如 ...

  2. Luogu P2486 染色（树链剖分+线段树）

    题解 不妨采取重链剖分的方式把路径剖成区间,然后用线段树维护,考虑如何合并一个区间 struct Node { int lf, rg, tot; }seg[N << 2]; int col ...

  3. 算法练习（js）

    1. 问题:Spinal Tap Case 将字符串转换为 spinal case.Spinal case 是 all-lowercase-words-joined-by-dashes 这种形式的,也 ...

  4. 高效的 itertools 模块(转)

    原文地址:http://python.jobbole.com/87380/ 我们知道,迭代器的特点是:惰性求值(Lazy evaluation),即只有当迭代至某个值时,它才会被计算,这个特点使得迭代 ...

  5. [Luogu1979][NOIP2013]华容道(BFS+SPFA)

    考虑从起点到终点的过程,一定是先将空格子移到指定格子旁边,和指定格子交换,再移到下一个指定格子要到的地方,再交换,如此反复. 于是问题分为两个部分: 1.给定两个曼哈顿距离为2的格子求最短路,BFS即 ...

  6. [BZOJ5248][九省联考2018]一双木棋(连通性DP,对抗搜索)

    5248: [2018多省省队联测]一双木棋 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 43  Solved: 34[Submit][Status ...

  7. nginx配置本地https

    客户端如何验证服务器的证书呢?服务器自己的证书必须经过某"权威"证书的签名,而这个"权威"证书又可能经过更权威的证书签名,这么一级一级追溯上去,最顶层那个最权威 ...

  8. 深度学习的GDB调试命令和经验记录

    调试的指令很简单: cd $CAFFE_ROOT, 1. gdb ./build/tools/caffe 2. 设置运行参数 set args train --solver=xxxxsolver.pr ...

  9. 广义线性模型(logistic和softmax)

    再谈广义线性模型之前,先来看一下普通线性模型: 普通线性模型的假设主要有以下几点: 1.响应变量Y和误差项ϵ正态性:响应变量Y和误差项ϵ服从正态分布,且ϵ是一个白噪声过程,因而具有零均值,同方差的特性 ...

  10. 新浪微博宋琦：PHP在微博优化中的“大显身手”

    摘要:2013中国软件开发者大会编程语言与工具专题论坛中,新浪微博架构师宋琦介绍了PHP在新浪微博中的应用,并且分享了很多微博主站所做的性能优化的工作. [CSDN报道] 2013中国软件开发者大会( ...