CSS實(shí)現(xiàn)底部tapbar欄功能
發(fā)布時(shí)間：2020-04-22 14:27:35 作者：前端陳偉霆 
我要評論
我要評論最近小編接了一個(gè)項(xiàng)目需要實(shí)現(xiàn)手機(jī)端底部tab欄切換功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
現(xiàn)在許多移動(dòng)手機(jī)端都有底部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>
到此這篇關(guān)于CSS實(shí)現(xiàn)底部tapbar欄的文章就介紹到這了,更多相關(guān)css 底部tapbar欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css實(shí)現(xiàn)網(wǎng)頁欄目左側(cè)固定當(dāng)滾動(dòng)到底部時(shí)自動(dòng)調(diào)整位置
這篇文章主要介紹了css實(shí)現(xiàn)網(wǎng)頁欄目左側(cè)固定當(dāng)滾動(dòng)到底部時(shí)自動(dòng)調(diào)整位置 ,需要的朋友可以參考下2019-05-29