如何編寫CSS文字導(dǎo)航？這是許多網(wǎng)站設(shè)計(jì)者和開發(fā)者都需要面對(duì)的問題。下面我們來講一下如何使用CSS編寫簡(jiǎn)單而有效的文字導(dǎo)航。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #000;
color: #fff;
padding: 10px;
font-size: 18px;
}
.nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
margin-right: 20px;
}
.nav ul li a {
color: #fff;
text-decoration: none;
}
.nav ul li.active a {
border-bottom: 2px solid #fff;
}

上面的代碼演示了如何使用flexbox創(chuàng)建一個(gè)基本的文字導(dǎo)航。我們首先將nav元素設(shè)置為display: flex，這樣它的子元素就會(huì)成為flex子元素。我們還使用justify-content和align-items屬性來使我們的子元素水平和垂直居中。我們還設(shè)置了一個(gè)黑色背景和白色文字。

接下來，我們使用CSS選擇器為ul和li元素進(jìn)行樣式設(shè)置。我們使用了display: flex使ul元素也成為flex子元素，并使用margin和padding設(shè)置了一些樣式。我們還使用了list-style: none，這樣li元素旁邊的默認(rèn)圓點(diǎn)會(huì)被隱藏。我們將li元素右側(cè)的間距設(shè)置為20px。

對(duì)于鏈接元素，我們?cè)O(shè)置了文字顏色為白色，并使用text-decoration設(shè)為none，這樣鏈接將不會(huì)有下劃線。最后，我們?yōu)楫?dāng)前活動(dòng)鏈接的下劃線設(shè)置了兩個(gè)像素的白色邊框。

以上就是如何使用CSS編寫簡(jiǎn)單而有效的文字導(dǎo)航的教程。希望對(duì)你有所幫助！