CSS让一个盒子div永远在视图界面的最底部

最新推荐文章于 2023-04-06 14:26:58 发布

K I N G

最新推荐文章于 2023-04-06 14:26:58 发布

阅读量4.3k

点赞数 3

文章标签： css 前端 css3

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/z2000ky/article/details/127510317

版权

让一个盒子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>

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

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS让一个盒子div永远在视图界面的最底部

CSS让一个盒子div永远在视图界面的最底部
复制链接

扫一扫

K I N G CSDN认证博客专家 CSDN认证企业博客

码龄5年

温州宏丰合金有限公司

54: 原创

117万+: 周排名

4万+: 总排名

7万+: 访问

: 等级

684: 积分

142: 粉丝

128: 获赞

7: 评论

175: 收藏

私信

关注

热门文章

最新评论

理解闭包(力扣大佬写的，受教了)
K I N G: /** * @param {string} val * @return {Object} */ var expect = function(val) { return{ toBe:function(a){ if(val===a) return true throw new Error ("Not Equal") }, notToBe:function(b){ if(val!==b){ return true }else{ throw new Error("Equal") } } } }; /** * expect(5).toBe(5); // true * expect(5).notToBe(5); // throws "Equal" */
理解闭包(力扣大佬写的，受教了)
K I N G: 理解后 var createCounter = function (n) { return function () { return n++; }; };
理解闭包(力扣大佬写的，受教了)
K I N G: 理解加深，用闭包写一个计数器 /** * @param {number} n * @return {Function} counter */ var createCounter = function(n) { let counm = 0 return function() { let aaa = counm + n counm++ return aaa }; }; /** * const counter = createCounter(10) * counter() // 10 * counter() // 11 * counter() // 12 */
JS如何随机生成一个整数
2401_83180876: 1到10的随机数不应该是 Math.random()*9+1 吗？
将时间戳按格式转换为日期对象
K I N G: 第一个入参是数字，时间搓就是数字类型；第二个是字符串。

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。