html自适应高度原理,HTML5 自适应高度的标签

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

font-family: 'Open Sans', sans-serif;

color: #50555a;

padding: 100px 20px;

}

nav {

z-index: 9;

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

color: white;

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 20px 0;

text-align: center;

}

.bg-color {

background-color: #46a1de;

transition-duration: 0.5s;

}

.text-color {

color: #46a1de;

transition-duration: 0.5s;

}

footer {

padding: 40px 0;

text-align: center;

opacity: 0.33;

color: white;

}

.wrapper {

min-width: 600px;

max-width: 900px;

margin: 0 auto;

}

.tabs {

display: table;

table-layout: fixed;

width: 100%;

-webkit-transform: translateY(5px);

transform: translateY(5px);

}

.tabs > li {

transition-duration: 0.25s;

display: table-cell;

list-style: none;

text-align: center;

padding: 20px 20px 25px 20px;

position: relative;

overflow: hidden;

cursor: pointer;

color: white;

}

.tabs > li:before {

z-index: -1;

position: absolute;

content: "";

width: 100%;

height: 120%;

top: 0;

left: 0;

background-color: rgba(255, 255, 255, 0.3);

-webkit-transform: translateY(100%);

transform: translateY(100%);

transition-duration: 0.25s;

border-radius: 5px 5px 0 0;

}

.tabs > li:hover:before {

-webkit-transform: translateY(70%);

transform: translateY(70%);

}

.tabs > li.active {

color: #50555a;

}

.tabs > li.active:before {

transition-duration: 0.5s;

background-color: white;

-webkit-transform: translateY(0);

transform: translateY(0);

}

.tab__content {

background-color: white;

position: relative;

width: 100%;

border-radius: 5px;

}

.tab__content > li {

width: 100%;

position: absolute;

top: 0;

left: 0;

display: none;

list-style: none;

}

.tab__content > li .content__wrapper {

text-align: center;

border-radius: 5px;

width: 100%;

padding: 45px 40px 40px 40px;

background-color: white;

}

.content__wrapper h2 {

width: 100%;

text-align: center;

padding-bottom: 20px;

font-weight: 300;

}

.content__wrapper img {

width: 100%;

height: auto;

border-radius: 5px;

}

.colors {

text-align: center;

padding-top: 20px;

}

.colors > li {

list-style: none;

width: 50px;

height: 50px;

border-radius: 50%;

border-bottom: 5px solid rgba(0, 0, 0, 0.1);

display: inline-block;

margin: 0 10px;

cursor: pointer;

transition-duration: 0.2s;

box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);

}

.colors > li:hover {

-webkit-transform: scale(1.2);

transform: scale(1.2);

border-bottom: 10px solid rgba(0, 0, 0, 0.15);

box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);

}

.colors > li.active-color {

-webkit-transform: scale(1.2) translateY(-10px);

transform: scale(1.2) translateY(-10px);

box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);

border-bottom: 20px solid rgba(0, 0, 0, 0.15);

}

.colors > li:nth-child(1) {

background-color: #2ecc71;

}

.colors > li:nth-child(2) {

background-color: #d64a4b;

}

.colors > li:nth-child(3) {

background-color: #8e44ad;

}

.colors > li:nth-child(4) {

background-color: #46a1de;

}

.colors > li:nth-child(5) {

background-color: #bdc3c7;

}