资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css制作底部tapbar栏的代码

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

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

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

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


文章名称:css制作底部tapbar栏的代码
URL地址:http://cdkjz.cn/article/gdhhpo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220