代码语言：javascript复制
<!--选项卡的html部分，是先div包括起来全部，然后最上面是ul三个，下面是div内容就行了啊-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{list-style-type: none;}
.tab-area
{
width: 600px;
height: 600px;
border: 1px solid red;
}
.tab-area ul
{
height: 100px;
border: 1px solid red;
}
.tab-area ul li
{
height: 100px;
width: 180px;
border: 1px solid red;
float: left;
background: red;
}
.q
{
position: relative;
height: 400px;
width: 600px;
border: 1px solid red;
}
.q div
{
position: absolute;
left: 0px;top: 0px;
height: 400px;width: 600px;border: 1px solid red;
background: #fff;
}
#w:target,#e:target,#r:target
{
z-index:1;
}
</style>
</head>
<body>
<div class="tab-area">
<ul>
<li><a href="#w">李文1</a></li>
<li><a href="#e">李文2</a></li>
<li><a href="#r">李文3</a></li>
</ul>
<div class="q">
<div id="w">爱你1</div>
<div id="e">爱你2</div>
<div id="r">爱你3</div>
</div>
</div>
</body>
</html>核心:因为li浮动了，所以达到普通流了，如果父级不设置高度就会塌陷，为什么会塌陷，因为 1.什么是浮动元素的脱标? 脱标: 脱离标准流 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
2.浮动元素脱标之后会有什么影响? 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素 但是核心是那么这个时候前面一个元就会盖住后面一个元素核心是同一种元素哈比如都是div 核心2：要让下面的div固定相对于ul固定在ul的下面，然后是核心来了， background: #fff;变背景 z-index:1;点击哪一个哪一个就覆盖前两个在第一层，这时候就有一个问题了，那就是
怎么解决？ 方法就是background: #fff;就能清楚覆盖的哪两个了，只留下最前面的哪一个。为什么呢，因为背景的的意思是清除覆盖的动懂吗？ 问题？为什么李文123要用ulli，为什么下面用div？ 因为有三个啊，div是内容啊
