直接使用代码
图片素材
点击下载本素材所包含的图片,js文件
css代码
<style>
/* 共用网站底部 */
#index-footer { position:relative; background-color:#ededed; }
#index-footer .bg { padding-top:50px; padding-bottom:30px; }
#index-footer .col-md-20 { width: 20%; float:left;}
#index-footer p { font-size:14px; color:#4ecdcd; text-align:center; margin-top:10px; line-height:25px;transition: all 0.4s;}
#index-footer .con { text-align:center; padding:0 30px; }
#index-footer .totop { position: fixed; right:5px;bottom:50px;border-radius:50%}
#index-footer .col-md-20 img{transition: all 0.4s;}
#index-footer .col-md-20:hover p,#index-footer .col-md-20:hover img{transform: scale(1.1); }
#index-footer .copyrigyt{text-align: center;line-height: 50px;;}
</style>
HTML+JS代码
<section id="index-footer">
<div class="container">
<div class=" bg">
<div class="col-md-20">
<div class="con ">
<img src="/Public/images/erweima.png " width="100%">
<p>中原艺术教育</p>
</div>
</div>
<div class="col-md-20 pm">
<div class="con mar-top30">
<img src="http://www.bootfastui.cn/img/2021/0415/dingwei.png" width="30%">
<p>地址<br>郑州市郑东新区龙子湖<br>建业智慧港E座6层</p>
</div>
</div>
<div class="col-md-20">
<div class="con mar-top30">
<img src="http://www.bootfastui.cn/img/2021/0415/dianhua.png" width="30%">
<p>电话<br>0371—60151990<br>0371—56712343</p>
</div>
</div>
<div class="col-md-20">
<div class="con mar-top30">
<img src="http://www.bootfastui.cn/img/2021/0415/youxiang.png" width="30%">
<p>邮箱<br>hnyspx@126.com<br>1276519223@qq.com</p>
</div>
</div>
<div class="col-md-20">
<div class="con ">
<img src="/Public/images/erweima.png " width="100%">
<p>河南省艺术培训协会</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="copyrigyt">备案号:豫ICP888888号 技术支持:奋达科技</div>
</div>
<div class="totop"><a href=""><img src="http://www.bootfastui.cn/img/2021/0415/top.png"></a></div>
</section>
<script>
$(document).ready(function () {
//上滑到顶部代码
$('.totop').click(function () {
$('html,body').animate({ scrollTop: 0 }, '2000');
})
});
</script>