史上最牛逼的純CSS實現tab選項卡,閃瞎你的狗眼

來源:互聯網
上載者:User

標籤:ber   rpe   mil   utf-8   head   charset   back   rac   screen   

: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選項卡,閃瞎你的狗眼

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: