CSS3 动态高度梯田样式的响应式标签集

HTML5/CSS3 responsive tabset with dynamic height

tab，responsive

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1603
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #1a1a1a;
    font-family: sans-serif;
    text-align: center;
    color: #fefefe;
    overflow-y: scroll;
}
a {
    text-decoration: none;
}
a.link {
    color: #3f6b9d;
    -webkit-transition: all 150ms ease 0s;
    transition: all 150ms ease 0s;
}
a.link:hover {
    color: #e08f24;
}
p {
    margin-bottom: 10px;
}
header {
    margin: 60px 0 40px;
}
header h1 {
    margin-bottom: 0px;
}
header .sup {
    font-style: italic;
    color: #999;
    margin-top: 4px;
}
.tabs {
    position: relative;
    margin: 40px auto;
    width: 1024px;
    max-width: 100%;
    overflow: hidden;
    padding-top: 10px;
    margin-bottom: 60px;
}
.tabs input {
    position: absolute;
    z-index: 1000;
    width: 25%;
    height: 50px;
    left: 0;
    top: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
    margin: 0;
}
.tabs input#tab-2 {
    left: 25%;
}
.tabs input#tab-3 {
    left: 50%;
}
.tabs input#tab-4 {
    left: 75%;
}
.tabs label {
    background: #3f6b9d;
    color: #fefefe;
    font-size: 15px;
    line-height: 50px;
    height: 60px;
    position: relative;
    top: 0;
    padding: 0 20px;
    float: left;
    display: block;
    width: 25%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    -webkit-transition: all 150ms ease 0s;
    transition: all 150ms ease 0s;
}
.tabs label:hover {
    cursor: pointer;
}
.tabs label:after {
    content: '';
    background: #fefefe;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}
.tabs input:hover + label {
    background: #e08f24;
}
.tabs label:first-of-type {
    z-index: 4;
}
.tab-label-2 {
    z-index: 4;
}
.tab-label-3 {
    z-index: 3;
}
.tab-label-4 {
    z-index: 2;
}
.tabs input:checked + label {
    background: #fefefe;
    color: #1a1a1a;
    z-index: 6;
}
.clear-shadow {
    clear: both;
}
.content {
    height: auto;
    width: 100%;
    float: left;
    position: relative;
    z-index: 5;
    background: #fefefe;
    top: -10px;
    box-sizing: border-box;
}
.content div {
    position: relative;
    float: left;
    width: 0;
    height: 0;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    background: #fefefe;
}
.content div h2 {
    margin-top: 0;
}
.tabs .tab-selector-1:checked ~ .content .content-1,
.tabs .tab-selector-2:checked ~ .content .content-2,
.tabs .tab-selector-3:checked ~ .content .content-3,
.tabs .tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    width: 100%;
    height: auto;
    width: 100%;
    height: auto;
    padding: 5%;
}
.content div h2 {
    color: #3f6b9d;
}
.content div p {
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    text-align: left;
    margin: 0;
    color: #777;
    padding-left: 15px;
    border-left: 8px solid rgba(63, 148, 148, 0.1);
}
@media screen and (min-width: 768px) {
    .tabs input:checked + label {
        top: -5px;
    }
}
@media screen and (max-width: 767px) {
    .tabs {
        height: auto;
        background: #fefefe;
        padding-bottom: 200px;
        width: 95%;
    }
    .tabs label {
        text-align: left;
    }
    .tabs input:checked + label {
        padding-left: 30px;
    }
    .tabs label,
    .tabs input {
        width: 100%;
        position: absolute;
    }
    .tabs label.tab-label-1,
    .tabs label#tab-1,
    .tabs input.tab-label-1,
    .tabs input#tab-1 {
        width: 88%;
        top: 150px;
        left: 0;
        height: 50px;
        z-index: 4 !important;
    }
    .tabs label.tab-label-2,
    .tabs label#tab-2,
    .tabs input.tab-label-2,
    .tabs input#tab-2 {
        width: 92%;
        top: 100px;
        left: 0;
        height: 100px;
        z-index: 3 !important;
    }
    .tabs label.tab-label-3,
    .tabs label#tab-3,
    .tabs input.tab-label-3,
    .tabs input#tab-3 {
        width: 96%;
        top: 50px;
        left: 0;
        height: 150px;
        z-index: 2 !important;
    }
    .tabs label.tab-label-4,
    .tabs label#tab-4,
    .tabs input.tab-label-4,
    .tabs input#tab-4 {
        width: 100%;
        top: 0;
        left: 0;
        height: 200px;
        z-index: 1 !important;
    }
    .tabs .content {
        top: 200px;
    }
}

HTML

<div class="content">
        <div class="content-1">
            <h2>Tab 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac. Quisque nunc mi, vulputate eget mi id, fringilla rhoncus
                dui. Morbi rhoncus accumsan rhoncus. Pellentesque ac tellus orci. Mauris facilisis sem eu auctor congue. Praesent at nunc leo. Cras ultricies, orci a placerat auctor, felis erat egestas enim, non porttitor lacus metus at nibh. In sit amet
                lectus fermentum, gravida turpis nec, dapibus arcu. Cras at nisi faucibus, condimentum odio id, mattis justo. Duis malesuada diam rutrum risus dignissim interdum.</p>
        </div>
        <div class="content-2">
            <h2>Tab 2</h2>
            <p>Aenean tristique hendrerit sapien in porta. Aliquam feugiat luctus blandit. Cras nunc ex, egestas in consequat ac, egestas vitae lectus. Nunc convallis purus sed ex pretium, sit amet dapibus lorem efficitur. Nulla facilisi. Vivamus ut metus
                purus. Nam tincidunt faucibus dolor, eget aliquet justo. Nullam turpis ipsum, gravida non lacinia ac, condimentum in sapien. Praesent vulputate dolor ac interdum semper. Nullam sed odio semper, tempor libero ut, pharetra enim. Donec at
                mattis dolor, eget varius turpis. Aliquam erat volutpat. Nulla bibendum rhoncus felis sed accumsan. </p>
            <p>
                Suspendisse vulputate, leo sed cursus feugiat, ipsum odio accumsan diam, iaculis volutpat enim ligula et lacus. Donec hendrerit pellentesque lectus, tempus gravida orci vulputate ut. Vivamus sed vehicula libero, id imperdiet tellus. Etiam lacinia felis
                vitae vulputate condimentum. Duis vitae pulvinar elit, ac iaculis mauris. Pellentesque tincidunt interdum elementum. Nunc dictum volutpat mauris, in interdum sem tincidunt eget. Morbi vitae ipsum scelerisque, condimentum magna gravida,
                eleifend risus. Phasellus ac placerat eros, ac auctor sem. Etiam id orci tempor, suscipit felis vel, ultrices ex. Quisque tempus fringilla libero id aliquam. Quisque et sapien enim. Vestibulum laoreet lacus sit amet efficitur commodo.
                Mauris lacinia magna at sapien lacinia fringilla ac viverra nibh. Suspendisse tristique consectetur arcu sed pulvinar.</p>
        </div>
        <div class="content-3">
            <h2>Tab 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac.</p>
        </div>
        <div class="content-4">
            <h2>Tab 4</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia leo sit amet diam varius, ac maximus turpis volutpat. Cras interdum nulla orci, eget convallis tellus mollis ac. Quisque nunc mi, vulputate eget mi id, fringilla rhoncus
                dui. Morbi rhoncus accumsan rhoncus. Pellentesque ac tellus orci. Mauris facilisis sem eu auctor congue. Praesent at nunc leo. Cras ultricies, orci a placerat auctor, felis erat egestas enim, non porttitor lacus metus at nibh. In sit amet
                lectus fermentum, gravida turpis nec, dapibus arcu. Cras at nisi faucibus, condimentum odio id, mattis justo. Duis malesuada diam rutrum risus dignissim interdum.</p>
            <p>
                Aenean tristique hendrerit sapien in porta. Aliquam feugiat luctus blandit. Cras nunc ex, egestas in consequat ac, egestas vitae lectus. Nunc convallis purus sed ex pretium, sit amet dapibus lorem efficitur. Nulla facilisi. Vivamus ut metus purus. Nam
                tincidunt faucibus dolor, eget aliquet justo. Nullam turpis ipsum, gravida non lacinia ac, condimentum in sapien. Praesent vulputate dolor ac interdum semper. Nullam sed odio semper, tempor libero ut, pharetra enim. Donec at mattis dolor,
                eget varius turpis. Aliquam erat volutpat. Nulla bibendum rhoncus felis sed accumsan.</p>
            <p>
                Suspendisse vulputate, leo sed cursus feugiat, ipsum odio accumsan diam, iaculis volutpat enim ligula et lacus. Donec hendrerit pellentesque lectus, tempus gravida orci vulputate ut. Vivamus sed vehicula libero, id imperdiet tellus. Etiam lacinia felis
                vitae vulputate condimentum. Duis vitae pulvinar elit, ac iaculis mauris. Pellentesque tincidunt interdum elementum. Nunc dictum volutpat mauris, in interdum sem tincidunt eget. Morbi vitae ipsum scelerisque, condimentum magna gravida,
                eleifend risus. Phasellus ac placerat eros, ac auctor sem. Etiam id orci tempor, suscipit felis vel, ultrices ex. Quisque tempus fringilla libero id aliquam. Quisque et sapien enim. Vestibulum laoreet lacus sit amet efficitur commodo.
                Mauris lacinia magna at sapien lacinia fringilla ac viverra nibh. Suspendisse tristique consectetur arcu sed pulvinar.</p>
        </div>
    </div>
</section>

HTML5/CSS3 responsive tabset with dynamic height

tab，responsive

编辑器支持Emmet

快捷键

HTML5/CSS3 responsive tabset with dynamic height

tab，responsive

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：