再发一个网页底部装饰代码

本文及资源最后更新时间 2025-09-27 by sky995

效果图：

直接上代码：

<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;
}