html：运用弹性布局写一个热门活动简介表

最新推荐文章于 2024-04-18 11:06:27 发布

Astar stars

最新推荐文章于 2024-04-18 11:06:27 发布

阅读量1.6k

点赞数 4

分类专栏： html作品分享文章标签： css3 前端 css

本文链接：https://blog.csdn.net/astar2022/article/details/125896560

版权

html作品分享专栏收录该内容

14 篇文章 3 订阅

订阅专栏

在弹性布局出来之前呢，我们一边很多时候都是运用盒子模型，定位，浮动来进行我们的结构框架搭建，那么今天呢我来向大家展示一下如何用弹性布局做一个小的demo。

效果展示：

html+css部分：

代码讲解：

效果展示：

结构比较简单，主要是让大家来简单来认识一下弹性布局。

html+css部分：

<style>
        .container {
            width: 720px;
            margin: 30px auto;
        }

        header {
            width: 660px;
            margin: 0 auto;
        }

        h3 {
            display: inline-block;
            font-size: 20px;
        }

        header>.more {
            float: right;
            font-size: 18px;
            font-weight: bold;
            color: #62666F;
        }
        /* 弹性布局 */
        ul{
            margin: 0 40px;
            height: 350px;
            display: flex;
            /* 将元素从左往右排列 */
            flex-direction: row;
            /* 设置不换行 */
            flex-wrap: wrap;
            /* 对齐方式 */
            justify-content: space-evenly;
            align-content: space-evenly;
        }
        ul a>img{
            width: 277px;
            height: 106px;
        }
        ul p{
            font-size: 12px;
            color: black;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h3>热门活动</h3>
            <div class="more">更多</div>
        </header>
        <main>
            <ul>
                <li>
                    <a href="">
                        <img src="./image/img1.png" alt="">
                        <p>推荐活动 | 原创音乐现金榜T榜</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./image/img2.png" alt="">
                        <p>推荐节目|《TAImusic》爆笑来袭</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./image/img3.png" alt="">
                        <p>推荐歌单 | 继续宠爱张国荣</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./image/img4.png" alt="">
                        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
                    </a>
                </li>
            </ul>
        </main>
    </div>
</body>