前端学习之旅(十)【flex实操案例】

最新推荐文章于 2025-05-24 12:44:23 发布

·+·+·

最新推荐文章于 2025-05-24 12:44:23 发布

阅读量963

点赞数 30

分类专栏： B大学前端文章标签：前端学习 html css css3

本文链接：https://blog.youkuaiyun.com/qq_62170186/article/details/135722571

版权

本文详细介绍了如何使用Flex布局技术实现一个响应式网站的头部设计，包括设置背景、导航菜单、logo居中以及内容导航部分的布局调整，展示了从基础样式到复杂布局的逐步实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实操任务

使用flex实现以下效果：

代码分析

准备部分代码

第一步：reset默认样式

    <style>
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
            border: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }
    </style>

背景部分代码

第一步：设置背景

 body {
     background-image: url(./bg.jpg);
}

第二步：设置背景不重复，且填充满body元素

 body {
     background-repeat: no-repeat;
     background-size: cover;
 }

header部分代码

第一步：编写头部元素

    <!-- 头部区域 -->
    <header>
        <div>
            <img src="./logo.png" alt="logo">
        </div>
        <ul>
            <li><a href="#">国内校区</a></li>
            <li><a href="#">缅甸校区</a></li>
            <li><a href="#">非洲校区</a></li>
            <li><a href="#">美国校区</a></li>
        </ul>
    </header>

第二步：设置头部区域的基本样式

    <style>
        header {
            height: 70px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0 20px;
        }
    </style>