網(wǎng)頁導(dǎo)航是人們在瀏覽網(wǎng)站時經(jīng)常需要使用到的功能，通過CSS可以非常簡單地制作網(wǎng)頁導(dǎo)航。下面我們就來介紹如何使用CSS制作網(wǎng)頁導(dǎo)航。

.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.nav li {
margin: 0 20px;
}
.nav a {
color: #333;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.nav a:hover {
background-color: #f5f5f5;
}

以上是一個基礎(chǔ)的網(wǎng)頁導(dǎo)航樣式，我們可以在這個基礎(chǔ)上進(jìn)行一些定制。
首先，可以更改導(dǎo)航欄的顏色和字體樣式。另外，也可以通過CSS3的動畫效果為導(dǎo)航欄添加一些特效，讓網(wǎng)站更具有活力。

.nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #a4c2f4;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.nav li {
margin: 0 20px;
}
.nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
position: relative;
}
.nav a:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
.nav a:hover:before {
transform: scaleX(1);
}

通過以上CSS代碼，我們?yōu)閷?dǎo)航欄添加了一個動畫效果，當(dāng)鼠標(biāo)懸浮在導(dǎo)航鏈接上時，底部出現(xiàn)一條白色的線條，給人一種非常流暢的體驗(yàn)。