史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

下载地址: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;
                }
时间: 2024-12-20 07:38:31

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

c#操作数据库,史上最牛逼的方法,你见过这种方法吗?

问题描述 免费分享给大家.下载地址在最下面.C#codevarSql=factorySql.Create<Users,InformationCategories>();//简单查询,返回实体类列表.varsdfsf123=Sql.ExecuteList<Users>((a,b)=>Sub.Top(8).Select(a.UserId,a.UserName).From(a));//分页查询,返回表DataTabledtUser=Sql.ExecuteDataTable((a,b

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

问题描述 免费分享给大家.下载地址在最下面.varSql=factorySql.Create<Users,InformationCategories>();//简单查询,返回实体类列表.varsdfsf123=Sql.ExecuteList<Users>((a,b)=>Sub.Top(8).Select(a.UserId,a.UserName).From(a));//分页查询,返回表DataTabledtUser=Sql.ExecuteDataTable((a,b)=>

爆赞!史上“最牛逼”创意乐队OK Go 最新单曲MV

class="post_content" itemprop="articleBody"> OK GO 简直就是神一般存在的乐队啊,他们的 MV 个个都是极品创意点子大合集!这次将视觉错觉玩到极致!一个镜头走下来,秒秒钟都是惊喜!最后团队集体现身时让人热泪盈眶-- 之前分享过他们多个作品,包括<This Too Shall Pass>,<End Love>,<Needing Getting>,每一个都很精彩. OK Go新单T

2011最火爆的建站工具!史上最牛自助建站软件

2011最火爆的建站工具!史上最牛自助建站软件,轻松建站不求人! 卓天网络http://www.e000.com/design/?s=ling 模板功能 模板选择 :我们提供多款精美模板可以选择,您可以随时更换您所喜欢的模板   结构选择 :我们提供多种网站结构选择,每个结构下有不同风格的模板   自定义模板 : 对于掌握一定技术的客户,我们提供自定义模板css和模板图片的功能,您可以更自由使用和设计您的模板 页面模块功能 文字模快 : 可在页面添加文字的工具,支持图片.表格.超链接文字等.能够

史上最牛的五次黑客攻击

好莱坞认为,黑客就像是使用计算机的黑魔导士.在电影中,计算机可以炸毁房屋.关闭公路.释放瘟疫还有引发女权运动.也许有人认为,好莱坞的想象力很丰满,但现实是骨感的.他们错了,因为在现实中,确实也有如电影所描述的黑客行动,而且刺激程度绝对不亚于电影.本文中笔者总结出史上最牛的五次黑客攻击. 1.逻辑炸弹引爆西伯利亚 在1982年,里根政府的CIA发现了克格勃(前苏联著名情报机构)从西方窃取技术已经很多年了.对此,美国中央情报局决定给克格勃设一个巨大的陷阱,而这个陷阱很有可能是历史上第一次使用的木马病

史上最牛的三大“圣诞节病毒”档案

节假日已经成为木马病毒大肆作案的挡箭牌,大量木马病毒打着节假日的幌子招摇撞骗,很多电脑用户一不小心就步入了病毒设计好的陷阱,也常常因此蒙受经济上的损失.12月21日,金山毒霸等反病毒厂商纷纷发布圣诞节病毒预警,而今年的圣诞节,MSN相册.瓢虫病毒等似乎来的更早,危害性更是不容小觑. 金山毒霸反病毒专家戴光剑表示,圣诞节.情人节等国外传来的节日最容易被病毒利用,木马病毒往往以一些祝福语.情话为幌子,发送带毒的邮件或链接,而在这些特殊的日子里,用户一般警惕性不高,很容易遭遇木马病毒的入侵. 史上最牛

史上最牛的10大计算机病毒

自从病毒诞生起,病毒就成为我们电脑生活中的一个不得不提的部分,那么将来会不会有那么一天病毒会消失呢?也许这是一个已经知道答案的问题,或者是这个问题永远没有答案也说不定,期待那一天吧,今天给大家献上史上最牛的10大计算机病毒,你是否曾经遇见过呢?     1. CIH(1998年)感染Win95/98中的可行性文件,这种病毒在Windows环境下传播,其实时性和隐蔽性都特别强,变种可以重写BIOS.大约在世界范围内造成了两千万到八千万美元的损失.     2. 梅利莎(Melissa,1999年)

史上最牛B的企业类网站模板免费下载!

赞赞赞!史上最牛B 的企业类网站模板免费下载! 下载试用地址http://www.e000.com/design/?s=xue N多款超漂亮,大气又实用,还有全可视化管理编辑后台,上百种功能管理模块,吐血分享! 免费试用下载地址:http://www.e000.com/design/site_package.php?s=xue

他写出了史上最牛高考满分作文,如今在天猫卖小龙虾

大家还记不记得,2001年有篇很牛的高考满分作文,叫<赤兔之死>? 这篇作文不仅拿了满分,还被称为史上最牛的高考作文. 作者叫蒋昕捷,毕业之后去了中国青年报,南方周末,当年的画风是这样的. 后来他又来了阿里巴巴,成为一名天猫小二.昨天高考语文,大家又开始翻出当年他的作文. 此时,正在参与天猫618的他,画风是这样的. 橙子逮住正在边卖小龙虾边数钱的他:"请问看到网友对你现在卖小龙虾的评价,有什么感想?" 这位斯斯文文的眼睛男思考了一会:"感想就是:小龙虾真的很好吃