效果图,忽略大水印
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/demo.css">
</head>
<body>
<div class="demo">
<ul class="demo_ul">
<li class="demo_li">
<input class="active" type="radio" name="check" id="active1" checked/><label for="active1">个人中心</label>
<div>
<abbr>微风轻轻吹起</abbr>
<p>总有些惊奇的际遇 比如当我遇见你</p>
</div>
</li>
<li class="demo_li">
<input class="active" type="radio" name="check" id="active2" /><label for="active2">我的主页</label>
<div>
<abbr>澄欢</abbr>
<p>女 白羊座 现居中国</p>
</div>
</li>
<li class="demo_li">
<input class="active" type="radio" name="check" id="active3" /><label for="active3">朋友</label>
<div>
<p>大宝</p>
<p>小宝</p>
<p>小猪</p>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS
/*居中对齐*/
.demo{
justify-content: center;
display: flex;
margin-right: 10px;
background-color: #ffffff;
}
/* 清除li样式 */
.demo ul,li{
list-style: none;
padding: 0;
}
div{
text-align: center;
}
/* ul弹性盒,让li横着排*/
.demo .demo_ul{
position: relative;
display: flex;
width: 500px;
margin-top: 50px;
}
/* 三个li平分宽度*/
.demo .demo_li{
flex:1;
height: 40px !important;
}
/* 隐藏input */
.demo .active{
display:none;
}
.demo input+label{
display: block;
height: 40px;
background: #d5e4f9cc;
text-align: center;
line-height: 40px;
color: #333;
border: 1px solid #e8e4e4;
}
.demo input+label+div{
display:none;
position: absolute;
left:0;
top:50px;
}
.demo input:checked+label{
border-bottom: none;
background: #fff;
color: #5c80ea;
text-align: center;
}
.demo input:checked+label+div{
display:block;
}