直接使用代码

图片素材

点击下载本素材所包含的图片，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>