頁面結構展示

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代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。