一、布局方式
1、内容与tab分离
| <div class="container"> <div class="tab-content"> <div id="item1" class="item">内容1</div> <div id="item2" class="item">内容2</div> <div id="item3" class="item">内容3</div> <div id="item4" class="item">内容4</div> </div> <div class="tab-control"> <ul> <li><a href="#item1">内容1</a></li> <li><a href="#item2">内容2</a></li> <li><a href="#item3">内容3</a></li> <li><a href="#item4">内容4</a></li> </ul> </div></div> |
| ul,li{ margin:0; padding:0; list-style:none;}.container{ width:400px; height:300px; background-color:silver;}.tab-content{ width:100%; height:80%; overflow:hidden;}.tab-content .item{ width:100%; height:100%;}.tab-control{ width:100%; height:20%;}.tab-control ul{ height:100%;}.tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer;}.tab-control li:hover{ background-color:#7b7474}.tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none;}.tab-control a::after{ content:""; display:inline-block; height:100%; vertical-align:middle;}.tab-content .item:target{ background:yellow;} |
2、内容与tab一体
| <div class="container"> <ul> <li class="item active"> <p class="title">1</p> <p class="content">1</p> </li> <li class="item"> <p class="title">2</p> <p class="content ml1">2</p> </li> <li class="item"> <p class="title">3</p> <p class="content ml2">3</p> </li> <li class="item"> <p class="title">4</p> <p class="content ml3">4</p> </li> </ul></div> |
| ul,li,p{ margin:0; padding:0; list-style:none;}.container{ width:400px; height:300px; background-color:silver; border:1px solid silver;}.container ul{ width:100%; height:100%; overflow:hidden;}.container .item{ float:left; width:25%; height:100%; background-color:white;}.container .item .title{ line-height:40px; border:1px solid silver; box-sizing:border-box; text-align:center; cursor:pointer;}.container .item .content{ width:400%; height:100%; background-color:yellow;}.ml1{ margin-left:-100%;}.ml2{ margin-left:-200%;}.ml3{ margin-left:-300%;}.active{ position:relative; z-index:1}.container .item:hover{ position:relative; z-index:1}.container .item:hover .title{ border-bottom:none; background-color:yellow;} |
