纯css+选项卡张鑫旭,纯css tab选项卡

* {

margin:0;

padding:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

body {

width:100%;

margin:0;

padding:0;

text-align:left;

font-size:12px;

font-family:方正黑体简体;

}

.tabs {

width:100%;

float:none;

list-style:none;

position:relative;

text-align:left;

}

.tabs li {

float:left;

display:block;

}

.tabs input[type="radio"] {

position:absolute;

top:-9999px;

left:-9999px;

}

.tabs label {

display:block;

padding:14px 21px;

border-radius:2px 2px 0 0;

font-size:14px;

font-family:方正黑体简体;

font-weight:normal;

text-transform:uppercase;

cursor:pointer;

position:relative;

top:4px;

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

.tabs label:hover {

/**选项卡点击后的背景**/

/*background:#703688;

*/

color:#479fb3;

text-decoration:underline;

font-size:14px;

font-family:方正黑体简体;

}

.tabs .tab-content1 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

}

.tabs .tab-content2 {

z-index:2;

display:none;

overflow:hidden;

width:100%;

font-size:14px;

line-height:25px;

position:absolute;

top:47px;

left:0;

}

.tabs [id^="tab"]:checked + label {

top:0;

padding-top:17px;

}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {

display:block;

}

.h1 {

clear:both;

height:1px;

background-color:#e9e9e9;

}

.first_name {

float:left;

margin:20px 30px;

}

.right_name {

float:right;

margin:20px 50px;

}