<!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>
