CSS手機底部導航菜單，是移動端常見的一種導航方式。下面我們通過一些CSS代碼來實現一個簡單的底部導航菜單。

/* CSS樣式 */
.nav{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
}
.nav ul{
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
.nav li{
list-style: none;
flex: 1;
text-align: center;
padding: 10px 0;
}
.nav a{
display: block;
text-decoration: none;
}
.nav i{
display: block;
font-size: 24px;
color: #999;
margin-bottom: 5px;
}
.nav span{
font-size: 12px;
color: #666;
}

上述代碼中，我們首先設置了導航菜單的位置屬性為fixed，底部對齊并置于所有元素之上（z-index: 999）。接下來，我們給ul加了flex布局，使其中的li元素能夠等分寬度，從而實現導航圖標和文字的對齊排列。在li元素中，我們還給圖標和文本設置了一些樣式，使其更加美觀。

使用這樣的CSS樣式，我們就可以輕松實現出一個簡單的底部導航菜單。同理，我們可以通過修改樣式來適應不同的頁面設計需求。