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

阿克苏网站建设公司创新互联,阿克苏网站设计制作，有大型网站制作公司丰富经验。已为阿克苏上1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的阿克苏做网站的公司定做！

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

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栏的代码，如果在日常工作遇到这个问题，希望你能通过这篇文章解决问题。如果想了解更多相关内容，欢迎关注创新互联行业资讯频道！

名称栏目：css制作底部tapbar栏的代码
网页URL：http://cdysf.com/article/gdhhpo.html