移动端底部导航栏中的公共样式CSS代码

页面结构展示

HTML代码结构

<div className="nav-bar"> {/*清除浮动：一般一行排列而且使用了浮动元素的，都是要清楚浮动的，浮动的代码在初始化样式common.less中已经写好了*/}<ul className="clear-fix"><li><NavLink exact to="/"><i className="iconfont icon-home"></i>首页</NavLink></li><li><NavLink to="/shop"><i className="iconfont icon-shop"></i>商城</NavLink></li><li><NavLink to="/life"><i className="iconfont icon-trophy"></i>生活服务</NavLink></li><li><NavLink to="/mine"><i className="iconfont icon-mine"></i>我的</NavLink></li></ul> </div>

CSS代码（使用less写的）

.nav-bar {background: #fff;position: fixed;left: 0;right: 0;bottom: 0;box-shadow: 0px 0px 0px #e1e1e1;ul {height: 1rem;padding-top: 6.5px;li {float: left;width: 25%;text-align: center;i {display: block;font-size: 20px;}}} }

总结

以上是生活随笔为你收集整理的移动端底部导航栏中的公共样式CSS代码的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。