直接使用代码

图片素材

css代码

 <style> 
 #footer-box{background:url(http://www.bootfastui.cn/img/2021/0306/footer.jpg) no-repeat top center}
.foot_nav{color:#333;border-bottom:1px solid #dedede}
.foot_nav h4{padding-left:25px;line-height:30px;font-size:18px;color:#096}
#footer{color:#333}
#footer ul{padding:20px 0}
#footer ul li{list-style:none}
#footer ul li a{color:#333;line-height:35px;display:inline-block}
#footer ul li a:hover{color:#f90}
#footer h4{padding-left:25px}
#footer ul{padding-left:25px}
#banquan{color:#fff;background:url(http://www.bootfastui.cn/img/2021/0306/footer.png) no-repeat bottom center;text-align:center;}
#banquan{margin-top:10px;height:80px;}
#banquan .b-content{line-height:18px;font-size:13px;padding-top:15px}
@media (max-width:700px){
    #footer ul{padding:10px 0}
    .contact-info{text-align: center;}
    #banquan{background-size: 100% auto;height:40px;}
    
}
</style> 

HTML+JS代码

   <div id="footer-box">
    <div class="container">
        <div class="row foot_nav ">
            <div class="col-md-2 col-xs-3 ">
                <h4>关于优控</h4>
            </div>
            <div class="col-md-2 col-xs-3 ">
                <h4>公司治理 </h4>
            </div>
            <div class="col-md-2 col-xs-3">
                <h4>合作伙伴</h4>
            </div>
            <div class="col-md-2 col-xs-3 ">
                <h4>技术支持</h4>
            </div>
            <div class="col-md-4 hidden-xs">
                <h4>电话联系</h4>
            </div>
        </div>
        <div id="footer">
            <div class="row">
                <div class="col-md-2 col-xs-3 ">
                    <ul>
                        <li><a href="">公司介绍</a></li>
                        <li><a href="">新闻中心</a></li>
                    </ul>
                </div>

                <div class="col-md-2 col-xs-3 ">
                    <ul>
                        <li><a href="">新闻速递</a></li>
                        <li><a href="">品牌介绍</a></li>
                        <li><a href="">品牌初心</a> </li>
                        <li><a href=" ">新闻速递</a></li>
                    </ul>
                </div>

                <div class="col-md-2 col-xs-3">
                    <ul>
                        <ll>
                            <li><a href="">品牌介绍</a></li>
                            <li><a href="">品牌初心</a> </li>
                            <li><a href=" ">新闻速递</a></li>
                            <li><a href="">品牌故事</a>
                            </li><a href="">品牌文化</a>
                        </ll>

                    </ul>
                </div>
                <div class="col-md-2 col-xs-3">

                    <ul>
                        <li><a href="">常见问题</a></li>
                    </ul>
                </div>
                <div class="clear visible-xs">
                    <hr>
                </div>

                <div class="col-md-4 col-xs-12 contact-info">

                    <ul>
                        <li><a>奋达科技有限公司</a></li>
                        <li><a>联系电话：0371-8888888888</a></li>
                        <li><a>地址：河南省管城区XXXX大厦</a></li>

                    </ul>
                </div>
            </div>
        </div>

        <div id="banquan">
            <div class="b-content">
                <p>
                    <span>备案号：</span>
                    <a href='https://beian.miit.gov.cn/#/Integrated/index' class="white" target="_blank">
                        豫 icp备55555555号
                    </a>
                    <span>当前浏览量：4917</span>
                </p>
                <p class="hidden-xs">版权所有：河南奋达网络科技有限公司 主营产品：app建设，自适应网站，微信小程序</p>
            </div>
            <div class="clear"></div>
        </div>

    </div>
</div>