在網(wǎng)頁設(shè)計(jì)中，導(dǎo)航欄是十分重要的組成部分，合適的導(dǎo)航欄可以使網(wǎng)站變得更加美觀和易于操作。今天我們談?wù)勅绾斡?CSS 來實(shí)現(xiàn)導(dǎo)航欄的特效。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>

上面的代碼是一個(gè)最基本的導(dǎo)航欄代碼，接下來我們?yōu)檫@個(gè)導(dǎo)航欄添加特效。

1. 給導(dǎo)航欄添加背景色

nav {
background-color: #333;
}

2. 讓導(dǎo)航欄變得更加顯眼

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
font-size: 20px;
transition: all 0.3s ease;
}
nav a:hover {
background-color: #fff;
color: #333;
}

3. 為選中的導(dǎo)航欄加上特效

nav a.active {
background-color: #fff;
color: #333;
border-bottom: 2px solid red;
font-weight: bold;
}

最后，在 html 中添加 active 類名即可。

<nav>
<ul>
<li><a href="#" class="active">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>

以上就是使用 CSS 為導(dǎo)航欄添加特效的代碼，大家可以根據(jù)自己的需要，添加不同的特效。希望本文能夠?qū)Υ蠹矣兴鶐椭?/p>