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

 

 

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.图例：

 

 

转载于:https://www.cnblogs.com/fcan/p/5160564.html