方法步骤:
①使用css将footer设置到底部;
②使用css响应式当高度小于多少时,不显示。
对应的footer代码如下:
<footer id="myFooter" class="text-white" id="myFooter">
<ul class="nav justify-content-center mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-white">新时代程序员群</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-white">联系站长</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-white">大屏展示站点</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-white">CSDN IT1995</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-white">About me</a></li>
</ul>
<p class="text-center text-white">Designed by IT1995</p>
</footer>
css如下:
#myFooter{
position:absolute;
bottom:0;
width:100%;
height:100px;
background-color: transparent;
}
@media screen and (max-height: 768px){
#myFooter{
display: none;
}
}
这里其他的css都是使用的是bootstrap
如:
.text-white {
--bs-text-opacity: 1;
color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.justify-content-center {
justify-content: center !important;
}
.px-2 {
padding-right: 0.5rem !important;
padding-left: 0.5rem !important;
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/124959058
内容来源于网络,如有侵权,请联系作者删除!