一、overflow大法
心法:控制尺寸,超出部分用overflow:hidden砍掉。
<div class="tab">
<div class="nav">
<a href="#the1">ONE</a>
<a href="#the2">TWO</a>
</div>
<div class="content">
<div id="the1" class="cont">第一张</div>
<div id="the2" class="cont">第二张</div>
</div>
</div>
.tab{
width: 300px;
height: 300px;
}
.nav{
height: 30px
}
.content{
height: 270px;
padding-bottom: 50px;
border-bottom: solid 20px red;
overflow: hidden;
}
.cont{
height: 270px;
}
#the1{
background: green;
}
#the2{
background: blue;
}
小提示:overflow的作用范围,是width和padding,margin与border不包括。
二、radio大法
心法:用radio与label配合,结合:checked,使label被点击时控制内容部分的display。
<div class="tab">
<div>
<input type="radio" id="r-1" name="tab" checked>
<label for="r-1" class="label-1">第一张</label>
<div class="mod-1">
<ul>
<li>275万购昌平邻铁三居</li>
<li>总价20万买一居</li>
<li>200万内购五环三居</li>
<li>北京首现零首付楼盘</li>
</ul>
</div>
</div>
<div>
<input type="radio" id="r-2" name="tab">
<label for="r-2" class="label-2">第二张</label>
<div class="mod-2">
<ul>
<li>新中式的酷色温情</li>
<li>深圳房价大跌,每平8W</li>
<li>800万买沙井三房</li>
<li>宝安房价平均900W</li>
</ul>
</div>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.tab{
width: 300px;
height: 150px;
margin-left: 30px;
margin-top: 30px;
border: 1px solid #eee;
position: relative;
overflow: hidden;
}
input[type='radio']{
display: none;
}
input[type='radio']:checked~div[class^='mod']{
display: block;
}
input[type='radio']:checked~label{
background: orange;
}
.tab label{
position: absolute;
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #eee;
}
.label-1{
left: 0;
top: 0;
}
.label-2{
left: 60px;
top: 0;
}
[class^='mod']{
position: absolute;
top: 40px;
left: 20px;
display: none;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。