直接使用代码

图片素材

css代码

   <style type="text/css">
#footer { background:#1a1c2b ; padding:40px 0; padding-bottom:10px; }
#footer a{ color:#ccc; line-height:30px; display:block;padding:0 10px;}
#footer a:hover{ color:#e70}
#footer p{ color:#ccc; line-height:30px;}
#footer .banquan{ padding-top:20px; border-top:1px solid #444;}


@media (max-width: 768px) {
  .address-info{padding:10px;}
  #footer p{ padding:10px;}
}
</style>

HTML+JS代码

        
<!--页面底部 -->
<div  id="footer">
  <div class="container" >
     <div class="row">
         <div class="col-md-3 col-xs-12">
         <img src="/Public/images/logo.png" class="img-responsive mar-top20"/> 
         <hr class="visible-xs"/>
         </div>
        <div class="col-md-4 ">
           <div class="row">
              <div class="col-md-6 col-xs-6">
                  <a href="">关于我们</a>
                  <a href="">双屏互动</a>
                  <a href="">双屏互动</a>
                  <a href="">小风和小岩</a>
              </div>
              
              <div class="col-md-6  col-xs-6">
                  <a href="">公司新闻</a>
                  <a href="">诚聘英才</a>
                  <a href="">双屏互动</a>
                 <a href="">最美声优</a>
              </div>
           </div><!--row end -->
          
         </div>
         <div class="col-md-5">
           <p class="address-info">
             <volist name='listConfig' id="vo">
             邮箱：{$vo.email}<br/>
             固话：{$vo.fix_tel}<br/>
             电话：{$vo.tel}<br/>
             地址：{$vo.address}
            </volist>
           </p><br>
         </div>
  
     </div>
   </div>

  <div class="banquan">
       <div class="container">
         <p  >
            <volist name='listConfig' id="vo">
            版权所有：{$vo.copyright}  未经许可  严禁复制，镜像本站内容<br/>
            备案编号：{$vo.beian}；京公安安备11010102000541  技术支持：捷通科技
          </volist>
         </p>
     </div>
  </div>
</div>