惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
Martin Fowler
Martin Fowler
云风的 BLOG
云风的 BLOG
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
The Blog of Author Tim Ferriss
大猫的无限游戏
大猫的无限游戏
A
About on SuperTechFans
小众软件
小众软件
博客园_首页
博客园 - 聂微东
罗磊的独立博客
Recent Announcements
Recent Announcements
U
Unit 42
N
Netflix TechBlog - Medium
Blog — PlanetScale
Blog — PlanetScale
阮一峰的网络日志
阮一峰的网络日志
博客园 - 叶小钗
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
Stack Overflow Blog
Stack Overflow Blog
博客园 - Franky
D
DataBreaches.Net
Last Week in AI
Last Week in AI

小世界博客

不是这哥们想干啥啊 - 小世界博客 AI助手的未来发展 - 小世界博客 OpenClaw 安装教程:从零开始搭建你的 AI 助手 - 小世界博客 维护通知页面 - 小世界博客 网站左下角 小蛇 - 小世界博客 CF怀旧模式 - 小世界博客 又是心情愉悦的一天呐 - 小世界博客 我咋就这么倒霉 - 小世界博客 给你的博客加个春节倒计时 - 小世界博客 分享一个赞助源码 - 小世界博客
一个网页底部装饰代码 - 小世界博客
admin · 2025-08-22 · via 小世界博客

共计 823 个字符,预计需要花费 3 分钟才能阅读完成。

一个网页底部装饰代码

<div class="footer-perch"> <div id="footer-animal"> <div class="animal-wall"></div> <img class="animal entered loaded" src="动物图片地址" alt="动物" data-ll-status="loaded"> </div></div>

一个网页底部装饰代码

/* 底部元素布局 */
#footer-banner {
order: 999;
}

.footer-perch {
height: 10px;
display: flex;
flex-direction: column;
order: 1;
}

#footer-animal {
position: relative;
width: 100%;
margin-top: auto;
top: 1rem;
}

#footer-animal .animal-wall {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background: #bcb0a4 url(背景墙地址) repeat center;
background-size: auto 100%;
box-shadow: 0 4px 7px rgba(0, 0, 0, .15);
}

@media screen and (max-width: 1023px) {
#footer-animal .animal-wall {
height: min(36px, 4vw);
}
}

#footer-animal img.animal {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width: min(500px, 100vw);
display: block;
}

/* 去除多余的 !important */
#footer-bar {
margin-top: 0;
}

一个网页底部装饰代码

防止图片失效 图片建议自己放到本地使用