css标签class,CSS标签

css

/***************************************

*

* Reset

*

*/

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font: 13px/1 sans-serif;

color: #333;

background-color: #eee;

}

/***************************************

*

* Grid

*

*/

.large-12 {

padding: 15px;

}

/***************************************

*

* Layout

*

*/

.header {

height: 100px;

padding-top: 30px;

text-align: center;

}

.logo {

font-family: 'Avenir Next', sans-serif;

font-size: 16px;

font-weight: 600;

}

.wrapper {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

background: #fff;

}

.inner {

width: 500px;

margin: auto;

padding: 15px 0;

}

/***************************************

*

* Tabs

*

*/

.c-tabs {

position: relative;

display: flex;

flex-wrap: wrap;

}

.c-tabs [id*='-tab-content-'] {

display: none;

}

.c-tabs input[type='checkbox'],

.c-tabs input[type='radio'] {

display: none;

}

.c-tabs label {

flex: 1;

padding: 10px 0;

text-align: center;

color: #59d;

border: 1px solid #59d;

border-left-width: 0;

}

.c-tabs label:nth-child(2) {

border-left-width: 1px;

}

.c-tabs input:checked + label {

color: #fff;

background: #59d;

}

/***************************************

*

* Helper Classes

*

*/

.c-tabs-content label {

border: 0;

}

.c-tabs-minimal label {

flex: none;

padding: 10px;

}

/***************************************

*

* Content

*

*/

.c-content {

display: none;

width: 100%;

padding: 15px;

background: #eee;

}

#c-tab-11:checked ~ #c-content-11,

#c-tab-12:checked ~ #c-content-12,

#c-tab-13:checked ~ #c-content-13,

#c-tab-14:checked ~ #c-content-14,

#c-tab-15:checked ~ #c-content-15,

#c-tab-16:checked ~ #c-content-16,

#c-tab-17:checked ~ #c-content-17,

#c-tab-18:checked ~ #c-content-18,

#c-tab-19:checked ~ #c-content-19,

#c-tab-20:checked ~ #c-content-20 {

display: block;

}