移动端等分比显示导航状态

 

 

1.

1.html部分：

<footer class="footer">
　　<a href="#">

　　　　<i class="sprite icon_book"></i>
　　　　<span>资讯</span>
　　</a>
　　<a href="#">
　　　　<i class="sprite icon_tag"></i>
　　　　<span>产品</span>
　　</a>
　　<a href="#">
　　　　<i class="sprite icon_person"></i>
　　　　<span>实战</span>
　　</a>
　　<a href="#">
　　　　<i class="sprite icon_more"></i>
　　　　<span>讨论</span>
　　</a> 

</footer>

 

2.

.footer {height: 2.5rem;

　　position: fixed;

　　left: 0;

　　bottom: 0;

　　width: 100%；

　　display: -webkit-box;

　　background: #4a4a4a;

　　text-align: center;

}

.footer a { 

　　display: block;

　　-webkit-box-flex: 1;

　　box-sizing: border-box;

　　padding-top: 0.25rem;

　　border-right: 0.025rem solid #fff;

}

.footer a:last-child {

　　border-right: none;

}

 

 

 

3.图例：