直接使用代码

图片素材

css代码

  <style>
/* 底部 */
#footer{background:url(http://www.bootfastui.cn/img/2021/0508-2/index5.jpg) no-repeat center top;padding-top:50px;color:#fff;padding-top:30px;}
.bk-right{border-right:none}
@media (min-width: 992px) {
    .bk-right{border-right:1px solid #fff}
  }
#footer .f-item h4{font-size:19px;line-height: 40px;}
#footer .f-item p img{width:38px;vertical-align: middle;}
#footer .f-item p span{display:inline-block;line-height:20px;vertical-align: middle;padding-left:8px;}
#footer .f-item p a{display:inline-block;line-height:25px;font-size:14px;vertical-align: middle;padding-left:8px;color:#fff;}
#footer .f-item ul li a{display:block;line-height: 35px;color:#fff;font-size:17px;letter-spacing: 2px;}
#footer .f-item .text-wx{font-size:18px;text-align: center;line-height: 25px;color:#aaa;}
#footer .banquan{line-height:30px;background:#000;color:#fff;text-align: center;padding:8px 0}

</style>

HTML+JS代码

  
<section id='footer'>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="f-item">
          <!-- <h4>浪彩*创想</h4> -->
          <a href="/"><img src="/Public/images/logo2.png" width="300" /></a>
          <div class="clear"><br /></div>
          <!-- <h5>Henan Lancy industrial co. LTD</h5> -->
          <br />
          <p>
            <img src="http://www.bootfastui.cn/img/2021/0508-2/ico_f1.png" />
            <span>
              电话:13213151888<br />
              微信:leehll
            </span>
          </p>
          <p>
            <img src="http://www.bootfastui.cn/img/2021/0508-2/ico_f2.png" />
            <span>
              leehll@live.com
            </span>
          </p>
          <p>
            <img src="http://www.bootfastui.cn/img/2021/0508-2/ico_f3.png" />
            <span>
              www.lancy.com<br />
              www.lancy.cn
            </span>
          </p>
          <p>
            友情链接：
            <a href="http://www.lancymachine.com/" linkref="39" title="tissue paper making machine"
              target="_blank">tissue paper making machine</a>
          </p>
        </div>
      </div>

      <div class="col-md-2 col-xs-4">
        <div class="f-item  text-center bk-right">
          <h4>关于我们</h4>
          <ul>
            <li><a href="">企业简介</a></li>
            <li><a href="">企业文化</a></li>
            <li><a href="">资历认证</a></li>
            <li><a href="">展厅视频</a></li>
            <li><a href="">合作品牌</a></li>
          </ul>
        </div>
      </div>

      <div class="col-md-2  col-xs-4">
        <div class="f-item text-center bk-right">
          <h4>智能家居</h4>
          <ul>
            <li><a href="">智能安防</a></li>
            <li><a href="">智能客厅</a></li>
            <li><a href="">智能家居</a></li>
            <li><a href="">智能卧室</a></li>
            <li class="hidden-xs"><a href="">&nbsp;&nbsp;室内高尔夫</a></li>
            <li class="visible-xs"><a href="">室内高尔夫</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2    col-xs-4">
        <div class="f-item  text-center">
          <h4>家庭影院</h4>
          <ul>
            <li><a href="">私人影院</a></li>
            <li><a href="">客厅影视</a></li>
            <li><a href="">家庭KTV</a></li>
            <li><a href="">客厅影视</a></li>
            <li><a href="">家庭KTV</a></li>
          </ul>
        </div>
      </div>
    </div>
    <br /> <br />
  </div>
  <div class="banquan">
    Copyright © 河南XXXX有限公司 版权所有 备案号：豫ICP备23023845号-1 技术支持：奋达科技
  </div>
</section>