排版效果
首页 分类 购物车 我的
<div class="footnav"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div>
颜色
首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的
<div class="footnav footnav-red"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-yellow"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-blue"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-green"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-info"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div>
底色
首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的

首页 分类 购物车 我的
<div class="footnav footnav-bg-red"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-bg-yellow"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-bg-blue"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-bg-green"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-bg-info"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div> <br> <div class="footnav footnav-bg-black"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车</a> <a href=""><i class="ui-icon-user"></i>我的</a> </div>

首页 分类 购物车80 我的
底部浮动
<div class="footnav fixed-bottom mwidth"> <a href="" class="active"><i class="ui-icon-home"></i>首页</a> <a href=""><i class="ui-icon-list"></i>分类</a> <a href=""><i class="ui-icon-cart"></i>购物车<span class="badge badge-red">80</span></a> <a href=""><i class="ui-icon-user"></i>我的</a> </div>