在網站或移動應用中，底部導航欄是一個非常常見且有用的組件。當用戶瀏覽網站或使用應用時，導航欄會為用戶提供快速訪問不同頁面或功能的選項。為了確保導航欄總是可見和易于訪問，我們可以使用CSS中的 position 和 bottom 屬性來固定在頁面底部。

.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
}
.footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.footer li {
font-size: 18px;
cursor: pointer;
}
.footer li:hover {
color: #ddd;
}

在上面的代碼中，我們首先創建了一個類名為 .footer 的元素來包含底部導航欄的內容。我們將其 position 屬性設置為 fixed 以確保它固定在視口的底部。bottom 屬性設置為 0，使其始終位于頁面底部。我們還設置它的寬度為 100%，以使其與頁面的寬度相同。

為了讓導航欄看起來更漂亮，我們添加了一些CSS樣式來給它的背景色、文本顏色、高度等添加樣式。接下來，在ul列表上，我們設置了一些樣式，以確保在橫向排列菜單項時，距離會更加合適，并且始終會垂直居中。我們還添加了一個:hover偽類來在鼠標懸停在某個菜單項上時更改文本顏色。

這樣，我們就可以通過簡單的CSS樣式，實現固定在底部的導航欄。它將始終保持在用戶的視線范圍內，以便他們輕松訪問應用程序或站點的不同部分。