導(dǎo)航條是網(wǎng)站或應(yīng)用程序中必不可少的組成部分，它能方便用戶在不同頁面之間進行快速轉(zhuǎn)換。在CSS中，可以通過設(shè)置左邊來創(chuàng)建導(dǎo)航條，下面我們來一起學(xué)習(xí)如何實現(xiàn)。
/*創(chuàng)建導(dǎo)航欄的容器*/
.nav {
background-color: #333;
overflow: hidden;
}
/*設(shè)置導(dǎo)航鏈接*/
.nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*設(shè)置鼠標(biāo)懸停及選中效果*/
.nav a:hover, .nav a.active {
background-color: #4CAF50;
}首先，我們需要在HTML中創(chuàng)建一個用來包裹導(dǎo)航條的容器，下面給出一個簡單的HTML結(jié)構(gòu)：
接著，我們對導(dǎo)航鏈接進行樣式設(shè)置。我們選擇使用懸停和選中的效果來提高用戶的交互體驗。其中，float: left;使鏈接橫向排列；padding: 14px 16px;設(shè)置鏈接的上下左右內(nèi)邊距。
最后，設(shè)置鼠標(biāo)懸停及選中效果的代碼。使用.nav a:hover即可實現(xiàn)鼠標(biāo)懸停時的效果；使用.nav a.active即可實現(xiàn)選中時的效果。
這樣，一個簡單的導(dǎo)航條就完成了。你可以根據(jù)實際需求進行進一步的樣式設(shè)置。
上一篇css左邊布局右邊布局
下一篇html5+css3模板