CSS底部導航被廣泛應用于網頁設計中，因為它能夠讓我們的網站更美觀，更整潔。下面提供一些CSS底部導航的使用教程。

/* CSS底部導航樣式 */
.bottom-navbar {
position: fixed;  /* 固定到屏幕底部 */
bottom: 0;  /* 距離底部為0 */
z-index: 9999;  /* 確保導航在最前面 */
width: 100%;  /* 寬度100% */
}
.bottom-navbar ul {
display: flex;  /* 使用Flexbox布局 */
justify-content: space-between;  /* 均勻分布，使每個導航項之間有空隙 */
align-items: center;  /* 垂直居中 */
height: 50px;  /* 導航高度為50px */
background-color: #fff;  /* 導航背景色 */
border-top: 1px solid #ddd; /* 上邊框線條 */
}
.bottom-navbar li {
flex: 1; /* 均分子元素寬度 */
text-align: center;  /* 文本居中 */
padding: 5px;  /* 上下左右各5px的內邊距 */
}
.bottom-navbar a {
text-decoration: none;  /* 清除下劃線 */
color: #999; /* 導航文字顏色 */
}
/* 激活狀態的導航項樣式 */
.bottom-navbar li.active a {
color: #333;  /* 改變字體顏色 */
font-weight: bold; /* 加粗字體 */
}

以上樣式是一個基礎版的CSS底部導航，下面來看看如何在HTML中使用它。

<!-- HTML底部導航結構 -->
<nav class="bottom-navbar">
<ul>
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">分類</a></li>
<li><a href="#">購物車</a></li>
<li><a href="#">個人中心</a></li>
</ul>
</nav>

以上是一個簡單的底部導航結構，其中active類代表激活狀態的導航項。你可以根據需求添加更多導航項，或更改導航樣式。

總結一下，使用CSS底部導航可以讓網站更美觀，使用簡單的CSS和HTML代碼就可以實現。我們可以根據需求自定義導航樣式和結構，讓用戶更便捷地使用我們的網站。