在淘寶的網(wǎng)站上，我們經(jīng)常可以看到漂亮的導航圖片，在設計上也看起來很舒服。那么，這些導航圖片是怎么實現(xiàn)的呢？其實，這一切都與CSS有關。

.navbar {
background-image: url(../images/nav_bg.jpg);
background-repeat: repeat-x;
height: 59px;
position: relative;
}
.navbar .nav-list {
height: 59px;
line-height: 59px;
}
.navbar .nav-item {
display: inline-block;
vertical-align: middle;
position: relative;
}
.navbar .nav-item .nav-link {
display: block;
padding: 0 15px;
height: 59px;
font-size: 14px;
color: #333;
text-decoration: none;
}
.navbar .nav-item.active .nav-link,
.navbar .nav-item:hover .nav-link {
color: #f40;
}

上述代碼展示了一個簡單的淘寶導航實現(xiàn)，首先我們設置了一個navbar類，其作用是設置背景圖片，并使圖片不斷重復。接下來，我們定義了一個.nav-list元素，為了整合整個導航，以及每一個.nav-item元素，用于展示每一個導航選項。.nav-item元素通過inline-block屬性將它們的寬度設置為自適應，且垂直居中，同時會發(fā)現(xiàn)，每個.nav-item也包含自己的.nav-link元素，這是用來展示導航上的文本信息和文字樣式的。最后，在.nav-item元素上，我們使用了:hover和.active屬性來達到導航選項的高亮顯示。