CSS中的導(dǎo)航條是網(wǎng)站設(shè)計(jì)中經(jīng)常需要用到的樣式。其中最常見(jiàn)的是兩行導(dǎo)航條，它主要由兩條橫線組成，分別用于放置網(wǎng)站的主要導(dǎo)航和次要導(dǎo)航。下面我們來(lái)了解一下如何通過(guò)CSS來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的兩行導(dǎo)航條。

.nav-container {
/* 設(shè)置容器的寬度，以便導(dǎo)航條能夠居中 */
width: 960px;
margin: 0 auto;
}
.nav-bar {
/* 設(shè)置兩行導(dǎo)航條的高度 */
height: 60px;
}
.top-bar {
/* 設(shè)置頂部導(dǎo)航條的背景顏色和邊框 */
background-color: #333;
border-bottom: 1px solid #000;
}
.bottom-bar {
/* 設(shè)置底部導(dǎo)航條的背景顏色 */
background-color: #666;
}
.nav-item {
/* 設(shè)置導(dǎo)航項(xiàng)的樣式，如字體、顏色、對(duì)齊方式等 */
display: inline-block;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 60px;
margin: 0 20px;
}

以上代碼包含了兩個(gè)主要樣式類(lèi) .top-bar 和 .bottom-bar，它們分別用于設(shè)置頂部和底部導(dǎo)航條的樣式。這兩個(gè)樣式類(lèi)的父元素是 .nav-bar，它包含了所有的導(dǎo)航項(xiàng)，即 .nav-item。 在 .nav-item 樣式中，我們使用了 inline-block 屬性來(lái)使導(dǎo)航項(xiàng)橫向排列，并使用 margin 屬性為導(dǎo)航項(xiàng)之間添加空隙。line-height 屬性用于設(shè)置導(dǎo)航項(xiàng)的行高，以使其垂直居中。 最后，將以上代碼應(yīng)用于一個(gè) HTML 頁(yè)面中，即可呈現(xiàn)一個(gè)簡(jiǎn)單的兩行導(dǎo)航條。