leoyi520

移动端底部固定部分内容-样式1

移动端底部老是有一些需要固定的,无论怎么滑动都可以见得到。所以分享下面的代码:

移动端底部固定部分内容-样式1 - qq330168885 - 琉忆光年的博客

 

CSS代码:

/*返回顶部部分css*/
.aboutUs{
height: 30px;
background: #8F8E8E;
position: fixed;
bottom:80px;
left: 0;
width: 100%;
}
.aboutUs h4{
color:#fff;
line-height: 30px;
}
.aboutUs h5{
color:#fff;
line-height: 30px;
padding:0;
margin:0;
position: relative;
float: right;
margin-right: 10px;
}
.ico-top{
display: inline-block;
width: 30px;
height: 30px;
background: url("../images/b_27.jpg")no-repeat;
float: right;
margin-right: 30px;
}
/*底部版权*/
.hotel_footer{
background: #000;
height: 30px;
line-height: 30px;
text-align: center;
color:#fff;
position: fixed;
bottom:50px;
left: 0;
width: 100%;
font-size: 15px;
}

HTML代码:

<!-- 返回顶部 -->
<div class="aboutUs">
<a href="#returnTop"><span class="ico-top"></span><h5 class="fr">top</h5></a>
</div>
<div class="container">
<!-- 底部版权的部分 -->
<div class="row">
<div class="hotel_footer">
<p class="text-center">
©版权所有@xx旅馆
</p>
</div>
</div>
</div>


评论