zb底部导航代码

因为自己想写一个手机端的适配，下边想加几个单独的导航页面，所以也是华花劲心思，写了个导航源码

把下边代码插入到合适位置即可

下边是代码，需要自己调试，适配

<!--底部导航开始-->    
<div class="tp-footer-menu-layer">    
<div class="tp-footer-menu">    
<a href="跳转地址">    
<img src="图标icon" alt="">    
<span>首页</span>    
</a>    
<a href="跳转地址">    
<img src="图标icon" alt="">    
<span>网址</span>    
</a>    
<a href="跳转地址">    
<img src="图标icon" alt="">    
<span>商城</span>    
</a>    
<a href="跳转地址">    
<img src="图标icon" alt="">    
<span>登录</span>    
</a>    
<a href="跳转地址">    
<img src="图标icon" alt="">    
                <span>登录</span>    
            </a>   
</div>    
</div>    
<style>    
@media screen and (max-width: 750px){    
.tp-footer-menu-layer{    
display: block!important;    
}    
body{    
padding-bottom: 52px;    
box-sizing: border-box;    
}    
}    
.tp-footer-menu-layer{    
display: none;    
width: 100%;    
/* padding: 0 8px; */    
box-sizing: border-box;    
position: fixed;    
bottom: 0;    
left: 0;    
z-index: 10;    
}    
.tp-footer-menu{    
width: 100%;    
background: #fff;    
box-shadow: 0px 3px 5px 5px rgb(16 16 16/10%);    
padding: 4px;    
box-sizing: border-box;    
/* border-radius: 50px; */    
display: flex;    
align-items: center;    
justify-content: space-around;    
}    
.tp-footer-menu a{    
display: flex;    
flex-direction: column;    
align-items: center;    
justify-content: center;    
width: 20%;    
text-decoration: none;    
}    
.tp-footer-menu a img{    
width: 24px;    
height: 24px;    
}    
.tp-footer-menu a span{    
color: #000;    
font-size: 12px;    
font-weight: 600;    
line-height: 16px;    
padding-top: 2px;    
box-sizing: border-box;    
}    
</style>    
<!--底部导航结束-->