css+html模仿京东app底部导航栏

css+html模仿京东app底部导航栏

完成效果如下：
上下滑动页面，底部导航栏一直存在，位置不变

底部导航栏实现代码如下：

只需css写超简单代码
重点是footer标签，其余标签是为和京东导航栏一样而设置的样式

footer {
	width: 193rem;
	margin-top: 2rem;
	height: 25rem;
	background-color: white;
	
	padding-bottom: 1px;
	position: fixed;   //定位
	bottom: 0;   //一直在最下端
	display: flex;
	flex-flow: row;
}
.boxfooter{
	
	width: 26rem;
	height: 25rem;
	margin-left: 2rem;
	
	
}
.boxfooter img{
	margin-top: 2rem;
	margin-left: 3rem;
	width: 21rem;
	height: 12rem;
	
}
.boxfootertext{
	margin-left: 2rem;
	width: 19rem;
	height: 15rem;
	font-size: 6rem;
	text-align: center;
}

.boxfooter1{
	
	width: 52rem;
	height: 20rem;
	margin-left: 2rem;
	margin-right: 3rem;
	color: white;
	background: #FF0000;
	font-size: 7rem;
	border-radius: 50px 50px 50px 50px;
	text-align: center;
	margin-top: 2rem;
	
}
.boxfooter1 span{
	display: inline-block;
	position:relative;
    line-height:24px;
    top:50%;
    margin-top:-12px;
    vertical-align:top; 
}
.boxfooter2{
	
	width: 52rem;
	height: 20rem;
	
	color: white;
	background-color: rgb(255,194,13);
	font-size: 7rem;
	border-radius: 50px 50px 50px 50px;
	text-align: center;
	margin-top: 2rem;
}
.boxfooter2 span{
	display: inline-block;
	position:relative;
    line-height:24px;
    top:50%;
    margin-top:-12px;
    vertical-align:top; 
}

然后在html中应用footer标签，就可实现

<footer>
				<div class="boxfooter"><img src="img/店铺.JPG" /><div class="boxfootertext">店铺</div></div>
					<div class="boxfooter"><img src="img/客服1.jpg" /><div class="boxfootertext">客服</div></div>
					<div class="boxfooter"><img src="img/购物车.JPG" /><div class="boxfootertext">购物车</div></div>
					<div class="boxfooter1"><span><b>加入购物车</b></span></div>
					<div class="boxfooter2"><span><b>立即购买</b></span></div>
			</footer>