<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no"/> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta name="renderer" content="webkit"> <meta name="description" content=""> <meta name="keywords" content=""> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" > </script> <style> .am-menu { position: fixed; bottom: 0; width: 100%; background: #efefef; text-align: center; height: 54px; overflow: hidden; z-index: 98; border-top: 1px solid #ddd; } .am-menu-column { width: 25%; float: left; font-size:16px; margin-top:15px; } /*new footer*/ /*因为都是用的字体图标可能显示不出来，但是字体颜色会有变化*/ .index i:before { content: "e602"; color: #999; } .explore i:before { content: "e607"; color: #999; } .life i:before { content: "e600"; color: #999; } .my i:before { content: "e605"; color: #999; } .index-active i:after { content: "e603"; color: #32B5E5; } .explore-active i:after { content: "e608"; color: #32B5E5; } .life-active i:after { content: "e601"; color: #32B5E5; } .my-active i:after { content: "e606"; color: #32B5E5; } .index a span, .explore a span, .life a span, .my a span { display: block; color: #999; } .index-active a span, .explore-active a span, .life-active a span, .my-active a span { display: block; color: #32b4e5; } </style> </head> <body> <div style='height:2000px;'> <h1>989898</h1> <p> 1 1 1 1 1 1 </p> </div> <footer class="am-menu am-cf"> <div class="am-menu-column index" id="index"> <a href="#"> <span>首页</span> </a> </div> <div class="am-menu-column explore" id="explore"> <a href="#"> <span>逛逛</span> </a> </div> <div class="am-menu-column life" id="life"> <a href="#"> <span>生活</span> </a> </div> <div class="am-menu-column my" id="my"> <a href="#"> <span>我的</span> </a> </div> </footer> </body> </html>