移動設備的普及，越來越多的網站都推出了手機版。而底部菜單欄也被廣泛應用。在移動設備上，觸摸屏幕操作比使用鼠標更加便捷，因此底部菜單欄的操作按鈕更容易被用戶發現和使用。下面我們來看一下手機版底部菜單欄的CSS樣式。

.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background-color: #fff;
border-top: 1px solid #eee;
}
.footer ul{
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
}
.footer li{
text-align: center;
}
.footer a{
display: block;
color: #666;
text-decoration: none;
}
.footer a.active{
color: #f00;
}

上面的代碼中，我們首先給底部菜單欄設置了固定位置，并讓它緊貼底部。接著，我們為菜單欄設置了白色背景和一個淺灰色的頂部邊框。接下來，我們將菜單項的列表顯示方式設置為彈性布局，并指定了內容的對齊方式。

對于每個菜單項單獨設置了樣式。設置了居中對齊，并去除了默認的列表樣式。每個菜單項使用了鏈接標簽，以便于進一步設置樣式。在最后，對于當前選中項添加了一個特殊的樣式，比如高亮顏色。

當然，上面的CSS代碼并不是唯一的底部菜單欄樣式，樣式可以各種不同，并且隨著不同設備和頁面的不同而調整。總之，我們希望底部菜單欄要易于操作，美觀，同時也不要影響網頁的其它內容。