* { 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; }
纯css,比较实用,希望能帮到大家