標簽來添加鏈接。我們還需要將菜單包含在導航欄中。.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
background-color: #fff;
box-shadow: #ccc 0px -1px 5px;
z-index: 999;
}
.bottom-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.bottom-nav li {
flex: 1;
}
.bottom-nav a {
display: block;
padding: 10px;
text-align: center;
color: #666;
text-decoration: none;
}
.bottom-nav a.active,
.bottom-nav a:hover {
color: #333;
}
接下來，我們使用 CSS 來樣式化底部導航菜單。我們為導航欄添加了一些樣式，如固定位置、底部對齊、白色背景、陰影效果等。我們還使用了 Flex 布局來使導航欄中的菜單均勻分布，并讓鏈接在菜單項目中居中顯示。此外，我們還為當前頁面添加了 active 類，以顯示該頁面在導航欄中的鏈接。
到此，我們已經成功地創建了一個簡單的移動底部導航菜單。這樣的導航菜單可以提高用戶體驗，并使移動設備上的瀏覽更加方便。
