現在，越來越多的網站開始使用手機底部懸浮菜單，而且這種菜單的效果非常好。因為這種菜單在視覺上很容易被注意到，而且非常方便使用。現在，讓我們看看如何用CSS創建這個效果。

/* 在底部的懸浮菜單CSS */
.bottom-menu{
position: fixed; /* 固定在頁面底部 */
bottom: 0; /* 與底部對齊 */
left: 0; /* 靠左對齊 */
width: 100%; /* 寬度設置為100% */
background-color: #fff; /* 背景顏色設置為白色 */
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2); /* 添加陰影 */
z-index: 99; /* 確保顯示在頂部 */
display: flex; /* 開啟flex布局 */
justify-content: space-around; /* 將菜單項分布在空間中 */
align-items: center; /* 居中對齊 */
height: 60px; /* 背景高度 */
}
.bottom-menu-item{
font-size: 14px; /* 字體大小設置為14px */
color: #333; /* 字體顏色 */
text-align: center; /* 文字居中 */
}

這就是創建手機底部懸浮菜單的CSS代碼。只要將這些代碼復制并粘貼到你的網站中，就可以生成一個漂亮的底部懸浮菜單。這個效果非常好，而且可以適應不同的屏幕大小，適用于不同類型的網站。