水平導(dǎo)航欄是網(wǎng)頁(yè)設(shè)計(jì)中常用的一種菜單樣式。通過(guò)CSS的樣式控制，我們可以輕松實(shí)現(xiàn)水平導(dǎo)航欄的制作。

<ul class="navbar">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>

以上是水平導(dǎo)航欄的HTML代碼，接下來(lái)我們通過(guò)CSS樣式控制，將其變成一條漂亮的水平菜單：

.navbar {
list-style-type: none; /*去掉默認(rèn)的列表標(biāo)志*/
margin: 0;
padding: 0;
overflow: hidden; /*清除浮動(dòng)*/
background-color: #333; /*設(shè)置菜單背景顏色*/
}
.navbar li {
float: left; /*將列表項(xiàng)左浮動(dòng)*/
}
.navbar li a {
display: block; /*設(shè)置超鏈接元素塊狀屬性*/
color: white; /*設(shè)置字體顏色為白色*/
text-align: center; /*設(shè)置內(nèi)容居中*/
padding: 14px 16px; /*設(shè)置文字內(nèi)邊距*/
text-decoration: none; /*去掉下劃線*/
}
.navbar li a:hover {
background-color: #4CAF50; /*鼠標(biāo)經(jīng)過(guò)時(shí)，改變背景顏色*/
}

通過(guò)以上代碼，我們實(shí)現(xiàn)了一條簡(jiǎn)單卻實(shí)用的水平導(dǎo)航欄。我們?cè)O(shè)置了菜單的背景顏色、字體顏色、內(nèi)邊距等樣式屬性，讓菜單看起來(lái)更加美觀。