css制作底部tapbar栏的代码

这篇文章主要为大家分享了css制作底部tapbar栏的代码，文中示例代码介绍的非常详细，零基础也能参考此文章，感兴趣的小伙伴们可以参考一下。

首先我们来看一下实现效果：

css代码：

*{           margin: 0;           padding: 0;           text-decoration: none;           list-style: none;       }       .foot {           width: 100%;           height: 68px;           background: #FFFFFF;           position: fixed;           bottom: 0;           display: flex;           justify-content: space-around;           z-index: 999;           /*line-height: 20px;*/       }       .foot li {           height: 100%;       }       .foot li a {           display: block;           width: 100%;           height: 100%;           /* color: #979797;*/       }       .foot li a img {           /*display: block;*/           width: 26px;           height: 26px;           margin-top: 10px;       }       .foot li a p {           font-size: 12px;           width: 100%;           text-align: center;           /* color: #979797;*/           margin-top: 7px;       }       .botm-title{           color: #979797;       }       .actives {           color: #5C91FA;       }       .xz-img{           text-align: center;       }

html代码：

<%--底部tapbar--%>   
       
                          
                                  
               
首页推荐
                  
       
                          
                                  
               
我的推荐
                  
       
                          
                                  
               
我的福利
                  
   

以上就是css制作底部tapbar栏的代码，如果在日常工作遇到这个问题，希望你能通过这篇文章解决问题。如果想了解更多相关内容，欢迎关注行业资讯频道！