直接使用代码

图片素材

css代码

        
<style type="text/css">
#index-footer { background:#212121; }
#index-footer .row { padding-top:50px; padding-bottom:30px;}
#index-footer ul{ margin:0 auto; border-bottom:1px solid #3F3F3F; padding-bottom:20px; }
#index-footer ul li { float:left; margin-right:20px;}
#index-footer ul li a { color:#999;}
#index-footer .left p { color:#666; font-size:15px;}
#index-footer .left p.one { margin-top:30px;}
#index-footer .left p.tow { margin-bottom:20px;}
#index-footer  .right p {margin:0 auto; }
#index-footer  .right p.us { color:#CCC; font-size:18px}
#index-footer  .right p.tel { color:#F00; font-size:44px;}
#index-footer  .right p.add { font-size:14px; color:#5B5B5B}
@media (max-width: 768px) {
#index-footer ul li { float:left; margin:0 20px;}
.nav1{margin-right:0px;}
.left{text-align: center;}
.caption{text-align: center;}
}
@media (min-width: 1200px) {
.nav1{margin-right:50px;}
.caption{text-align:right;}
}
</style>

HTML+JS代码

           <div id="index-footer" >
          <div class="container ">
              <div class="row pad-top50 pad-bottom30">
                  <div class="col-md-7">
                    <div class="left">
                      <ul class="nav1">
                          <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>
                          <li><a href="#">关于亚邦</a></li>
                          <li><a href="#">关于亚邦</a></li>
                            <div class="clear"></div>
                        </ul>
                        <volist name='listConfig' id="vo">
                        <p class="one">版权所有：枫叶科技有限公司</p>
                        <p class="tow">豫ICP备895664566号</p>
                         </volist>
                        </div>
                    </div>
                    <div class="col-md-5">
                      <div class="right caption"> 
                          <p class="us">Contact us</p>
                          <volist name='listConfig' id="vo">
                            <p class="tel">0371-8596789877</p>
                            <p class="add">河南省郑州市管城区富田太阳城55699<br>605053977@qq.com</p>
                            <img src="/Public/images/img31.jpg" width="150" class='mar-top10'>
                          </volist>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div><!--row end-->
            </div><!--container end-->
            <div class="clear"></div>
        
        </div><!--id end-->