移动端底部加入购物车 原生，自己手写的

header 头部文件的引入

<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/> //自己写的css样式

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>

 

HTML 内容区域

<!-- 加入购物车 -->
<div class="cart">
　　<div class="shoucang">
　　　　<img class="imgclick" src="images/微信图片_20190826172150.png " alt="">
　　　　<p>收藏</p>
　　　</div>
　　<div class="gouwuche">
　　<span class="cart-img" >
　　　　<img src="images/2019-08-21_111046.png" >
　　</span>
　　<p>购物车</p>
</div>
　　<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block add">加入购物车</a>
　　<input type="button" name="" id="" class="buy" value="立即购买">
</div>

 

CSS 部分内容

/* 加入购物车 */
.cart{
width: 100%;
height: 45px;
padding-left: 0.9375rem;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 9999;
}
.shoucang img{
display: inline-block;
width: 1.5625rem;
height: 1.4375rem;
}
.shoucang,
.gouwuche
{
float: left;
font-size: 0.875rem;
width: 15%;
height: 100%;
line-height: 15px;

}
.mui-icon{
color: #FFF34B;
margin-bottom: 0.3125rem;
}
.mui-icon-cart{
color: #FF0000;
width: 1.625rem;
height: 1.75rem;
}
.gouwuche{
border-right:0.0625rem solid #ccc ;
}
.shoucang p,
.gouwuche p{
color: #222222;
}
.fa-shopping-cart{
color: #F14E41;
background-color: #FFFFFF;
}
.cart-img{
display: inline-block;
width: 1.5625rem;
height: 1.4375rem;
}
.cart-img img{
width: 100%;
margin-top: 0.125rem;
}

 

补充说明：

这只是一个单纯静态的移动端底部加入购物车的导航栏，后面的内容会写点击加入购物车，出现的弹窗部分及其他事件