HTML+CSS实现页签切换效果

最新推荐文章于 2023-08-25 13:32:54 发布

栖身星河之中

最新推荐文章于 2023-08-25 13:32:54 发布

阅读量1.2k

点赞数 3

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/ml12818/article/details/114982547

版权

html 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

css

5 篇文章 1 订阅

订阅专栏

效果图，忽略大水印

在这里插入图片描述
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;
}

栖身星河之中

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS实现页签切换效果

效果图，忽略大水印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"> .
复制链接

扫一扫