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

最新推荐文章于 2024-10-18 18:45:22 发布

·+·+·

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量928

点赞数 30

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

本文链接：https://blog.csdn.net/qq_62170186/article/details/135722571

版权

B大学前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实操任务

使用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>

第三步：设置Logo和校区导航的分居header两侧

    <style>
        header {
            display: flex;
            justify-content: space-between;
        }
    </style>

第四步：设置校区导航位于同一行

    <style>
        header ul {
            display: flex;
        }
    </style>

第五步：设置Logo和文字位于header的上下居中的位置

header {
    align-items: center;
}

第六步：设置文字的样式

 header ul li a {
     color: white;
     font-size: 20px;
     border: 1px white solid;
     border-radius: 8px;
     padding: 10px;
     margin-left: 20px;
 }

header部分展示

content部分代码

第一步：编写元素内容

    <!-- 内容导航部分 -->
    <div class="content">
        <div class="content-nav">
            <div class="item items1">
                <img src="./item1.png" alt="1">
                <span>我的邮箱</span>
            </div>
            <div class="item items2">
                <img src="./item2.png" alt="1">
                <span>云服务</span>
            </div>
            <div class="item items3">
                <img src="./item3.png" alt="1">
                <span>手机课堂</span>
            </div>
            <div class="item items4">
                <img src="./item4.png" alt="1">
                <span>微信服务</span>
            </div>
            <div class="item items5">
                <img src="./item5.png" alt="1">
                <span>在线客服</span>
            </div>
        </div>
    </div>

第二步：填充部分颜色，便于观察

 .item {
     width: 180px;
     height: 200px;
}

 .items1 {
     background: #595CA8;
 }

 .items2 {
     background: #FF9D2E;
     ;
 }

 .items3 {
     background: #01A6DE;
 }

 .items4 {
     background: #015E91;
 }

 .items5 {
     background: #1DC128;
 }

第三步：设置content-nav水平垂直居中

设置body

 html,
 body {
     height: 100%;
     width: 100%;
 }

设置水平垂直居中

 .content {
     display: flex;
     height: calc(100vh - 70px);
 }

 .content-nav {
     width: 1000px;
     height: 300px;
     margin: auto;
 }

第四步：设置内部导航div水平居中，以及均匀分布

 .content-nav {
     display: flex;
     align-items: center;
     justify-content: space-evenly;
 }

第五步：设置item上下排列，并设置排列方式

 .item {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
 }

第六步：设置文字样式以及阴影

 .item {
     cursor: pointer;
 }

 .item span {
     color: white;
     font-size: 20px;
 }

 .item:hover {
     box-shadow: 0 0 20px black;
 }

content部分展示

完整代码分享

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>flex案例</title>
    <style>
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
            border: none;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        body {
            background-image: url(./bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        header {
            height: 70px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        header ul {
            display: flex;
        }

        header ul li a {
            color: white;
            font-size: 20px;
            border: 1px white solid;
            border-radius: 8px;
            padding: 10px;
            margin-left: 20px;
        }

        .content {
            display: flex;
            height: calc(100vh - 70px);
        }

        .content-nav {
            width: 1000px;
            height: 300px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .item {
            width: 180px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background-color: gray;
            cursor: pointer;
        }

        .item span {
            color: white;
            font-size: 20px;
        }

        .item:hover {
            box-shadow: 0 0 20px black;
        }

        .items1 {
            background: #595CA8;
        }
        .items2 {
            background: #FF9D2E;;
        }
        .items3 {
            background: #01A6DE;
        }
        .items4 {
            background: #015E91;
        }
        .items5 {
            background: #1DC128;
        }
    </style>

    <style>
        
    </style>
</head>

<body>
    <!-- 头部区域 -->
    <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>

    <!-- 内容导航部分 -->
    <div class="content">
        <div class="content-nav">
            <div class="item items1">
                <img src="./item1.png" alt="1">
                <span>我的邮箱</span>
            </div>
            <div class="item items2">
                <img src="./item2.png" alt="1">
                <span>云服务</span>
            </div>
            <div class="item items3">
                <img src="./item3.png" alt="1">
                <span>手机课堂</span>
            </div>
            <div class="item items4">
                <img src="./item4.png" alt="1">
                <span>微信服务</span>
            </div>
            <div class="item items5">
                <img src="./item5.png" alt="1">
                <span>在线客服</span>
            </div>
        </div>
    </div>
</body>

</html>