介紹一個純css製作tab的執行個體代碼

來源:互聯網
上載者:User
使用radio選項按鈕可以製作tab效果,有幾個標籤頁,就需要對應添加幾個input,同時每個input的name必須設定為一致,使用CSS3的同級元素連結符來改變樣式。而Tab裡面的nav導航都要用label包裹並添加對應的for.
ps:tab不支援IE8及其以下,box 布局IE 6.0-11.0不支援可float浮動替代

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><title>DEMO3</title><style type="text/css">/*    tab頭地區*/.ui-tab input {    display: none}/*    內容地區*/.ui-tab .ui-content ul {    display: none;    min-height: 200px;}/*    頭部地區選中*/#new:checked ~ .ui-nav .new,#hot:checked ~ .ui-nav .hot,#video:checked ~ .ui-nav .video {    background: #F4BD00;}/*    內容地區選中*/#new:checked ~ .ui-content .new-list,#hot:checked ~ .ui-content .hot-list,#video:checked  ~ .ui-content .video-list {    display: block;    background: #f6f6f6;}/*    tab頭部布局*/.ui-nav ul {    display: -webkit-box;    display: box;    height: 45px;    line-height: 45px;    background: #fff;}.ui-nav ul > li {    -webkit-box-flex: 1;    box-flex: 1;    text-align: center;}.ui-nav ul > li label {    width: 100%;    display: block;    cursor: pointer;}</style></head><body>    <!--  -->    <p class="ui-tab">        <input type="radio" name="ui-tab" id="new" checked="checked" />         <input type="radio" name="ui-tab" id="hot" />         <input type="radio" name="ui-tab" id="video" />        <p class="ui-nav">            <ul>                <li class="new"><label for="new">最新新聞</label></li>                <li class="hot"><label for="hot">社會焦點</label></li>                <li class="video"><label for="video">最新視頻</label></li>            </ul>        </p>        <p class="ui-content">            <ul class="new-list">                <li>tab內容新1</li>            </ul>            <ul class="hot-list">                <li>tab內容新2…</li>            </ul>            <ul class="video-list">                <li>tab內容新3…</li>            </ul>        </p>    </p>    <!--  --></body></html>

效果:


【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤(2)-css視頻教程

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.