* {
margin:0;
padding:0;
}
body,html {
width:100%;
height:100%;
background:#f8f8f8;
}
.tab-wrap {
position:absolute;
left:50px;
right:50px;
top:50px;
bottom:50px;
background-color:#fff;
box-shadow:0 12px 9px 0 rgba(0,0,0,0.10);
border-radius:4px;
}
.tab-wrap .title {
height:50px;
line-height:50px;
padding:0 20px;
background-color:#00c1de;
border-radius:4px 4px 0 0;
color:#fff;
}
.tab-wrap .tab-title {
overflow:hidden;
list-style:none;
border-bottom:1px solid #A2A2A2;
}
.tab-title .title-item {
float:left;
height:45px;
line-height:45px;
padding:0 30px;
}
.tab-title .title-item.active {
border-bottom:2px solid #00c1de;
}
.tab-wrap .tab-content .content-item {
display:none;
padding:20px;
color:#00c1de;
}
.tab-wrap .tab-content .content-item.active {
display:block;
}
这是一个兼容 ie8 的 tab 选项卡,功能很简单,布局可以上下左右自适应。