CSS導航是網頁中常見的一種設計，它可以幫助用戶更方便的瀏覽網站內容。當導航還與圖片一起配合使用時，網站的視覺效果會更加美觀。

.nav {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
.nav li {
margin-right: 20px;
}
.nav a {
display: block;
text-align: center;
color: #333;
}
.nav a:hover {
color: #fff;
background-color: #333;
}
.nav img {
height: 20px;
margin-right: 5px;
}

在CSS中，通過使用Flex布局來實現導航條中內容的對齊，并且去掉了默認的列表樣式。利用margin來控制菜單項之間的距離。此外，我們設置了鼠標懸停時文字顏色和背景色的改變。在顯示圖片時，使用margin來調整圖片與文字之間的距離。

為了使導航菜單更具體現性，我們可以在個別菜單項中嵌入圖片。比如說，假設我們的網站有個登錄菜單項，我們可以通過在樣式表中如下設置圖片來對該菜單項進行裝飾：

.login a {
background: url('login.png') no-repeat;
padding-left: 20px;
}

在CSS中，我們使用background屬性來設置圖片的背景，并且將圖片向右padding了20個像素，這樣文字就能夠在圖片后面顯示，圖片是一個為了裝飾 菜單項 的小圖片。

總之，使用CSS導航和圖片結合只是美化網站的一個簡單的方法之一，但是在需要向用戶展示各個內容主題的時候起著至關重要的作用。要學好CSS導航，建議多看一些優秀的網頁設計和開發作品，尋找創新的方法來優化你的網站。