如何利用 CSS 来创造底部的标签栏效果？

发布时间：2023-07-27 14:01:38 所属栏目：语言来源：

导读： 我们在设计手机端页面时，常会遇到实现底部tab栏切换功能的需求，因此这篇文章就给大家分享一下用css实现底部tab栏的效果的示例，下文有实现效果及代码，感兴趣的朋友接下来跟随小编来看看吧。

css样式

我们在设计手机端页面时，常会遇到实现底部tab栏切换功能的需求，因此这篇文章就给大家分享一下用css实现底部tab栏的效果的示例，下文有实现效果及代码，感兴趣的朋友接下来跟随小编来看看吧。

    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--%>

   <ul class="foot">

       <li class="Imgbox" img="/images/tuiJianCus/index-wxz-icon.png" data-img="/images/tuiJianCus/index-xz-icon.png">

           <a href="/views/tuiJianCus/index.jsp">

               <div class="xz-img">

                   <img src="/images/tuiJianCus/index-wxz-icon.png" />

               </div>

               <p class="botm-title">首页推荐</p>

           </a>

       </li>

       <li class="Imgbox" img="/images/tuiJianCus/tuijiang-wxz-icon.png" data-img="/images/tuiJianCus/tuijiang-xz-icon.png">

           <a href="/views/tuiJianCus/tuijian_speed.jsp">

               <div class="xz-img">

                   <img src="/images/tuiJianCus/tuijiang-xz-icon.png" />

               </div>

               <p class="botm-title actives ">我的推荐</p>

           </a>

       </li>

       <li class="Imgbox" img="/images/tuiJianCus/my-wxz-icon.png" data-img="/images/tuiJianCus/my-xz-icon.png">

           <a href="/views/tuiJianCus/usercenter.jsp">

               <div class="xz-img">

                   <img src="/images/tuiJianCus/my-wxz-icon.png" />

               </div>

               <p class="botm-title ">我的福利</p>

           </a>

       </li>

   </ul>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!