移动页面底部导航固定底部DIV CSS代码

移动网页的关于我们、联系电话等信息固定在底部，相当于底部导航的效果。

固定在网页浏览器底部的效果

纯HTML CSS代码。

HTML代码部分：

<nav id="tool">
  <ul>
      <li><a href="链接"><img src="/images2020/jz_tb1.png" /><span>在线咨询</span></a></li> 
      <li><a href="tel:电话"><img src="/images2020/jz_tb2.png" /></em><span>电话咨询</span></a></li> 
      <li><a href="链接"><img src="/images2020/jz_tb3.png" /><span>联系我们</span></a></li>
      <li><a href="链接" rel="nofollow"><img src="/images2020/jz_tb4.png" /><span>关于我们</span></a></li>
  </ul>
</nav>

CSS代码部分：

#tool{ width:100%;height:52px; overflow:hidden;position:fixed;left:0;bottom:0; z-index:1000;}
#tool ul{overflow:hidden;background-color:#d90011; border-top:1px solid #cc0010;width:100%; height:51px;}
#tool ul li{float:left;width:25%; text-align:center;}
#tool ul li a{width:100%; border-left:1px solid #cc0010;display:block; height:41px;  text-align:center;box-sizing:border-box; color:#fff; padding-top:4px;} 
#tool ul li:first-child a{border:none;}
#tool ul li img{ width:auto; height:18px; margin:0 auto;}
#tool ul li span{ display:block; height:16px; line-height:16px; overflow:hidden; text-align:center;font-size:13px;font-family:"FAE8F6F96C59ED1"; padding:2px 0 0;}

图片素材

以上4个图片素材，为导航对应4个图标（保存命名为：jz_tb1.png、jz_tb2.png、jz_tb3.png、jz_tb4.png），保存使用。