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

/*底部導航 CSS 樣式*/
.bottom-bar {
background-color: #fff; /*導航欄背景色*/
height: 60px; /*導航欄高度*/
position: fixed; /*導航欄固定在頁面底部*/
bottom: 0; /*與頁面底部距離*/
z-index: 9999; /*導航欄層級*/
width: 100%; /*導航欄寬度*/
}
.bottom-bar ul {
margin: 0; /*去除ul的默認邊距*/
padding: 0; /*去除ul的默認內邊距*/
list-style-type: none; /*去除ul的默認樣式*/
display: flex; /*使用Flex布局實現導航內容水平排列*/
justify-content: center; /*使導航內容在水平方向居中*/
align-items: center; /*使導航內容在垂直方向居中*/
height: 100%; /*撐滿導航欄*/
}
.bottom-bar li {
width: 25%; /*將導航內容平均分成四份*/
text-align: center; /*使導航內容水平居中*/
position: relative; /*設置導航內容相對定位，以便實現樣式*/
}
.bottom-bar a {
display: inline-block; /*將導航內容變成塊級元素，以便設置寬高*/
width: 100%; /*導航內容寬度占滿li*/
height: 100%; /*導航內容高度與li高度一致*/
padding-top: 10px; /*上邊距*/
font-size: 14px; /*字體大小*/
color: #888; /*字體顏色*/
text-decoration: none; /*去掉下劃線*/
}
.bottom-bar a.active {
color: #333; /*激活狀態下的字體顏色*/
}
.bottom-bar li::before {
content: ""; /*用偽元素實現導航內容下面的線條*/
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%; /*鼠標滑過或激活導航時，將線條寬度變為50%*/
}

通過上述CSS樣式，我們可以實現一個簡單的底部導航界面，其中包含若干個導航內容，并且激活狀態下的導航內容下方會有一條線條進行標識，同時還可以增加鼠標懸停效果。底部導航在現代網站和應用程序中應用廣泛，是提高用戶體驗和便利性的重要方式之一。