css案例（三）flex布局案例

快一点要开始了

已于 2023-10-04 12:20:45 修改

阅读量129

点赞数

分类专栏： HTML、CSS、JavaScript简单案例文章标签：前端 css3

于 2023-09-26 21:41:50 首次发布

本文链接：https://blog.csdn.net/xtcbql/article/details/133304380

版权

HTML、CSS、JavaScript简单案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

flex布局是css3中的新布局模式，本文是一个基于flex布局的小案例。

案例图片

实现效果

实现代码

index.css

        body {
            margin: 0 auto;
            padding: 0;
            max-width: 540px;
            min-width: 320px;
        }

        /* 搜索模块 */
        .search-index {
            display: flex;
            height: 44px;
            background-color: aqua;
        }

        .search {
            flex: 1;
            border: 1px solid black;
        }

        .user {
            width: 44px;
            border: 1px solid black;
        }

        /* 焦点图模块  */
        .focus {
            height: 120px;
            background-color: antiquewhite;
        }

        /* 局部导航 */
        .local-nav {
            display: flex;
            height: 64px;
            background-color: blueviolet;
            list-style-type: none;
            margin: 0 auto;
            padding: 0;
        }

        .local-nav li {
            flex: 1;
            border: 1px solid black;
        }

        /* 主导航栏 */

        .nav-common {
            display: flex;
            height: 88px;
            background-color: brown;
            border: 1px solid black;
        }

        .nav-items {
            flex: 1;
            display: flex;
            flex-direction: column;
            border: 1px solid white;
        }

        .nav-items span {
            flex: 1;
            border: 1px solid yellow;
        }

index.html

<body>
    <!-- 搜索模块 -->
    <div class="search-index">
        <div class="search"></div>
        <a href="#" class="user"></a>
    </div>

    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="" alt="">
    </div>

    <!-- 局部导航 -->
    <ul class="local-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- 主导航栏 -->
    <nav>
        <div class="nav-common">
            <div class="nav-items">
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
            <div class="nav-items">
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

</body>