关于Flex的综合案例

最新推荐文章于 2024-05-31 14:44:29 发布

->yjy

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量30

点赞数

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

本文链接：https://blog.csdn.net/2301_79602614/article/details/134538809

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例目标：实现该图

分析：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>综合案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 考虑到后面会用到padding 会撑大盒子 */
            box-sizing: border-box;

        }

        li {
            list-style: none;
        }

        .box {
            /* 版心居中 */
            margin: 50px auto;
            width: 1200px;
            height: 418px;
            /* 输入bd就是下面这个边框 */
            border: 1px solid #ddd;
            border-radius: 10px;
        }

        .box ul {
            display: flex;
            flex-wrap: wrap;
            padding: 90px 40px 90px 60px;
            /* padding的四个方向之间要用空格隔开 */
            justify-content: space-between;
            /* 调整主轴之间的间距 让li之间有间距 */
            align-content: space-between;
            /* 调整行对齐方式 实现两行之间有距离 */

            height: 418px;
        }

        .box li {
            display: flex;
            width: 500px;
            height: 88px;
            /* background-color: pink; */
        }

        .box .pic {
            margin-right: 15px;
        }

        .box .text h4 {
            line-height: 40px;
            font-size: 20px;
            font-weight: 400;
            color: #333;
        }

        .box .text p {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/1.svg" alt=""></div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频dy视频，xigua及jinritoutuao</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./images/2.svg" alt=""></div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频dy视频，xigua及jinritoutuao</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./images/3.svg" alt=""></div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频dy视频，xigua及jinritoutuao</p>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./images/4.svg" alt=""></div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频dy视频，xigua及jinritoutuao</p>
                </div>
            </li>

        </ul>
    </div>
</body>

</html>

文字没有改可以自行改一下