底部導(dǎo)航是現(xiàn)代網(wǎng)站和應(yīng)用程序開發(fā)中必不可少的界面元素之一，它可以為用戶提供方便的導(dǎo)航，使得用戶可以更加快速方便地查找自己需要的內(nèi)容。在實(shí)現(xiàn)底部導(dǎo)航時(shí)，CSS樣式是非常關(guān)鍵的，下面我們將通過代碼演示的方式來介紹如何用CSS實(shí)現(xiàn)底部導(dǎo)航。

/*底部導(dǎo)航 CSS 樣式*/
.bottom-bar {
background-color: #fff; /*導(dǎo)航欄背景色*/
height: 60px; /*導(dǎo)航欄高度*/
position: fixed; /*導(dǎo)航欄固定在頁面底部*/
bottom: 0; /*與頁面底部距離*/
z-index: 9999; /*導(dǎo)航欄層級(jí)*/
width: 100%; /*導(dǎo)航欄寬度*/
}
.bottom-bar ul {
margin: 0; /*去除ul的默認(rèn)邊距*/
padding: 0; /*去除ul的默認(rèn)內(nèi)邊距*/
list-style-type: none; /*去除ul的默認(rèn)樣式*/
display: flex; /*使用Flex布局實(shí)現(xiàn)導(dǎo)航內(nèi)容水平排列*/
justify-content: center; /*使導(dǎo)航內(nèi)容在水平方向居中*/
align-items: center; /*使導(dǎo)航內(nèi)容在垂直方向居中*/
height: 100%; /*撐滿導(dǎo)航欄*/
}
.bottom-bar li {
width: 25%; /*將導(dǎo)航內(nèi)容平均分成四份*/
text-align: center; /*使導(dǎo)航內(nèi)容水平居中*/
position: relative; /*設(shè)置導(dǎo)航內(nèi)容相對(duì)定位，以便實(shí)現(xiàn)樣式*/
}
.bottom-bar a {
display: inline-block; /*將導(dǎo)航內(nèi)容變成塊級(jí)元素，以便設(shè)置寬高*/
width: 100%; /*導(dǎo)航內(nèi)容寬度占滿li*/
height: 100%; /*導(dǎo)航內(nèi)容高度與li高度一致*/
padding-top: 10px; /*上邊距*/
font-size: 14px; /*字體大小*/
color: #888; /*字體顏色*/
text-decoration: none; /*去掉下劃線*/
}
.bottom-bar a.active {
color: #333; /*激活狀態(tài)下的字體顏色*/
}
.bottom-bar li::before {
content: ""; /*用偽元素實(shí)現(xiàn)導(dǎo)航內(nèi)容下面的線條*/
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: #333;
transition: all 0.2s ease-in-out; /*添加過渡效果*/
}
.bottom-bar li:hover::before,
.bottom-bar li.active::before {
width: 50%; /*鼠標(biāo)滑過或激活導(dǎo)航時(shí)，將線條寬度變?yōu)?0%*/
}

通過上述CSS樣式，我們可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的底部導(dǎo)航界面，其中包含若干個(gè)導(dǎo)航內(nèi)容，并且激活狀態(tài)下的導(dǎo)航內(nèi)容下方會(huì)有一條線條進(jìn)行標(biāo)識(shí)，同時(shí)還可以增加鼠標(biāo)懸停效果。底部導(dǎo)航在現(xiàn)代網(wǎng)站和應(yīng)用程序中應(yīng)用廣泛，是提高用戶體驗(yàn)和便利性的重要方式之一。