demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<!-- IMPORT CSS-->
<link rel="stylesheet" href="./Demo.css">
</head>
<body>
<div id="tabBox">
<ul id="navBox">
<li class="active">编程</li>
<li>读书</li>
<li>运动</li>
</ul>
<div class="active">编程使我快乐</div>
<div>读书是我幸福</div>
<div>运动使我健康</div>
</div>
</body>
</html>
demo.css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#tabBox{
box-sizing:border-box;
margin:20px auto;
width:500px;
}
#navBox{
/*只要把容器设置为flex弹性盒子容器,那么容器中的子元素默认在容器主轴x轴水平靠左排列*/
display:flex;
/*相对于之前做操作*/
position:relative;
/*相对于之前的位置向下移动1px*/
top:1px;
}
#navBox li{
box-sizing:border-box;
line-height:35px;
padding:0 10px;
border:1px solid #999;
margin-right: 10px;
}
#navBox li.active{
border-bottom-color: #fff;
}
/*所有id位tabBox下的div*/
#tabBox>div{
box-sizing:border-box;
padding:10px;
border:1px solid #999;
height:150px
}
/*所有id位tabBox下的div具备active的才设置*/
#tabBox>div.active{
display:block;
}