让一个盒子div存在于body大盒子的最底部，直接用**绝对定位position: absolute;**就行

htlm部分

<body>
     <!-- 底部盒子 -->
    <footer>
        <a href=""><img src="./imgaes/index.png" alt=""></a>
        <a href=""><img src="./imgaes/sorts.png" alt=""></a>
        <a href=""><img src="./imgaes/cart.png" alt=""></a>
        <a href=""><img src="./imgaes/login.png" alt=""></a>
    </footer>
</body>

css样式部分

<style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 底部样式 */
        footer {
            display: flex;
            position: absolute;
            /* 和body这个盒子的底部距离为0px */
            bottom: 0px;
            width: 100%;
        }

        footer a{
            width: 25%;
        }
        footer img {
          width: 100%;
        }
    </style>

这样就完成了
效果样式
在这里插入图片描述

# css # 前端 # css3
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟