css案例18——导航栏处理、弹性盒子

最新推荐文章于 2024-03-19 10:15:00 发布

耶啵奶膘

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量326

点赞数

分类专栏： CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/xulihua_75/article/details/125676836

版权

CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一、案例样式

主要是标注线的地方，要一直出现着，左侧栏目添加更多的模块，右侧依旧不变。
在这里插入图片描述

二、案例代码

html代码：

<!-- 导航栏部分 -->
<div class="nav">
     <ul>
         <li class="liactive"><span>栏目1</span><span><img src="./img/close.png" /></span> </li>
         <li><span>栏目2</span><span><img src="./img/close.png" /></span></li>
         <li><span>栏目3</span><span><img src="./img/close.png" /></span></li>
         <li><span>栏目4</span><span><img src="./img/close.png" /></span></li>
     </ul>
     <div class="add">
         <span>+</span>
     </div>
 </div>

css核心代码：

.nav {
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .add {
        flex: 1;
        text-align: right;
        border-bottom: 1px solid #000;
    }
    
    .add span {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #000;
        margin-right: 20px;
    }

三、案例完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 800px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid red;
        }
        
        .nav {
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .add {
            flex: 1;
            text-align: right;
            border-bottom: 1px solid #000;
        }
        
        .add span {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #000;
            margin-right: 20px;
        }
        
        ul {
            display: flex;
        }
        
        ul li {
            list-style: none;
            width: 100px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            position: relative;
        }
        
        ul li img {
            position: absolute;
            right: 0;
            top: 0;
            width: 20px;
            height: 20px;
        }
        
        .content section {
            display: none;
        }
        
        .content .conShow {
            display: block;
        }
        
        section {
            padding: 20px;
        }
        /* 导航栏点击之后添加的样式 */
        
        .liactive {
            border-bottom: none;
            /* background-color: green; */
        }
    </style>
</head>

<body>
    <div class="container" id="tab">
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li class="liactive"><span>栏目1</span><span><img src="./img/close.png" /></span> </li>
                <li><span>栏目2</span><span><img src="./img/close.png" /></span></li>
                <li><span>栏目3</span><span><img src="./img/close.png" /></span></li>
                <li><span>栏目4</span><span><img src="./img/close.png" /></span></li>
            </ul>
            <div class="add">
                <span>+</span>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="content">
            <section class="conShow">栏目1</section>
            <section>栏目2</section>
            <section>栏目3</section>
            <section>栏目4</section>
        </div>
    </div>
    <!-- js文件注意位置的放置 -->
    <script src="./js/tab.js"></script>
</body>

</html>