大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS实现底部tapbar栏功能调动的方法

这篇文章将为大家详细讲解有关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;
       }

页面代码

<%--底部tapbar--%>
   
       
           
               
                   
               
               首页推荐

                                                                                           
               我的推荐

                                                                                           
               我的福利

                       

关于“CSS实现底部tapbar栏功能调动的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站名称:CSS实现底部tapbar栏功能调动的方法
当前链接:http://dzwzjz.com/article/pjcich.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP