一个网页底部装饰代码

121次阅读

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