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

关于移动端底部导航栏中的公共样式CSS代码以下文字资料是由3搜网小编为大家搜集整理后发布的内容，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“移动端底部导航栏中的公共样式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代码”这篇文章的内容，希望分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注3搜网技术频道。