十八、选项卡

最新推荐文章于 2024-05-28 14:56:34 发布

一个孤独漫步者的遐想

最新推荐文章于 2024-05-28 14:56:34 发布

阅读量83

点赞数

分类专栏： JavaScript 文章标签： css html flex css3 js

本文链接：https://blog.csdn.net/weixin_43555997/article/details/116757892

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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;
}

一个孤独漫步者的遐想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十八、选项卡

demo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="./Demo.css"> </head><body><div.
复制链接

扫一扫

专栏目录