css案例（三）flex布局案例

原创已于 2023-10-04 12:20:45 修改 · 213 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3

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

web前端基础专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何在HTML和CSS中使用flex布局实现一个搜索模块、焦点图模块以及局部和主导航栏的样式，提供了相关代码示例。

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>