站长图库向大家介绍了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代码：
<ul class="foot"> <li class="Imgbox" img="/images/tuiJianCus/index-wxz-icon.png" data-img="/images/tuiJianCus/index-xz-icon.png"> <a href="/index"> <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="/tuijian/"> <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="/user/"> <div class="xz-img"> <img src="/images/tuiJianCus/my-wxz-icon.png" /> </div> <p class="botm-title ">我的福利</p> </a> </li></ul>
以上就是css如何实现底部tapbar栏效果的详细内容。