* { 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 选项卡,功能很简单,布局可以上下左右自适应。