SOURCE

<!-- 1. 支持每行 2-5 个，改下面的 col-4 就行了 -->
<div class="m-footbar">
    <ul class="block col-4">
        <li class="item on">
            <a href="" class="inner">
                <div class="badge">99</div>
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <div class="badge-dot"></div>
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
        <li class="item">
            <a href="" class="inner">
                <img src="http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png" alt="" class="pic" />
                <div class="txt">首页</div>
            </a>
        </li>
    </ul>
</div>

/* 最外层 */
.m-footbar { overflow: hidden; position: fixed; bottom: 0; width: 100%; background: #fff; border-top: 1px solid #ccc; font-size: 14px; }
    /* 列表 */
    .m-footbar > .block {}
        .m-footbar > .block > .item { float: left; }
        .m-footbar > .col-2 > .item { width: 50%; }
        .m-footbar > .col-3 > .item { width: 33.3333%; }
        .m-footbar > .col-4 > .item { width: 25%; }
        .m-footbar > .col-5 > .item { width: 20%; }
            /* 单个，要调整内边距改 .inner 的 padding */
            .m-footbar .inner { position: relative; display: block; padding: 5px; text-align: center; }
                /* 图标 */
                .m-footbar .pic { width: 32px; }
                /* 角标 */
                .m-footbar .badge, .m-footbar .badge-dot { position: absolute; left: 50%; margin-left: 8px; padding: 0 5px; height: 16px; line-height: 16px; font-size: 12px; background: red; color: #fff; -webkit-border-radius: 8px 8px; border-radius: 8px 8px; }
                .m-footbar .badge-dot { overflow: hidden; padding: 0; width: 8px; height: 8px; }
                /* 文本 */
                .m-footbar .txt { overflow: hidden; width: 100%; height: 1em; line-height: 1; color: #444; }
                /* 高亮时 */
                .m-footbar > .block > .item.on .txt { color: #03a9f4; }