CSS是一種用于網(wǎng)頁(yè)設(shè)計(jì)和排版的技術(shù)。借助CSS，我們能夠?qū)崿F(xiàn)許多想象中的布局效果，其中包括橫排導(dǎo)航欄。在這篇文章中，我們將教你如何使用CSS來制作一個(gè)簡(jiǎn)單卻效果不錯(cuò)的橫排導(dǎo)航欄。
<html>
<head>
<style>
/* 定義導(dǎo)航欄的樣式 */
.nav-bar {
display: flex; /* 將導(dǎo)航欄變?yōu)?flex 格式，便于水平布局 */
justify-content: space-around; /* 將各個(gè)導(dǎo)航項(xiàng)水平對(duì)齊，且自動(dòng)分配間距 */
align-items: center; /* 將導(dǎo)航欄內(nèi)部垂直居中 */
background-color: #ffffff; /* 設(shè)定導(dǎo)航欄背景色，這里使用了白色 */
height: 80px; /* 設(shè)定導(dǎo)航欄高度 */
}
/* 定義導(dǎo)航項(xiàng)的樣式 */
.nav-link {
font-size: 20px; /* 設(shè)定導(dǎo)航字體大小 */
color: #000000; /* 設(shè)定導(dǎo)航字體顏色，這里使用了黑色 */
text-decoration: none; /* 去掉導(dǎo)航下劃線 */
margin-top: 20px; /* 設(shè)定導(dǎo)航上邊距，使其跟頂部有一定距離 */
}
/* 鼠標(biāo)懸停在導(dǎo)航項(xiàng)上時(shí)，顯示下劃線效果 */
.nav-link:hover {
border-bottom: 2px solid #000000; /* 設(shè)定下劃線樣式，這里使用了黑色實(shí)線 */
}
</style>
</head>
<body>
<nav class="nav-bar">
<a class="nav-link" href="#">首頁(yè)</a>
<a class="nav-link" href="#">產(chǎn)品介紹</a>
<a class="nav-link" href="#">公司動(dòng)態(tài)</a>
<a class="nav-link" href="#">聯(lián)系我們</a>
</nav>
</body>
</html>像上面這樣調(diào)整后，你就可以得到一個(gè)簡(jiǎn)單的橫排導(dǎo)航欄了。當(dāng)然，你可以根據(jù)自己的需要進(jìn)行一些優(yōu)化或者美化。比如，可以添加一個(gè) LOGO 圖標(biāo)、增加導(dǎo)航項(xiàng)之間的間距、動(dòng)態(tài)滑動(dòng)下劃線等效果，使導(dǎo)航欄更加美觀和實(shí)用。