CSS樣式表是制作網(wǎng)頁(yè)中不可缺少的元素之一。其中，制作導(dǎo)航欄也是網(wǎng)頁(yè)設(shè)計(jì)的常見(jiàn)要素。下面就通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)展示如何使用CSS樣式表制作導(dǎo)航欄。

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

這是一個(gè)最基本的導(dǎo)航欄的HTML結(jié)構(gòu)，其中的a標(biāo)簽可以通過(guò)CSS樣式來(lái)修改顏色、字體、背景等。

nav ul {
list-style: none; /*去掉ul前面的圓點(diǎn)*/
margin: 0;
padding: 0;
background-color: #f2f2f2;
display: table; /*將ul設(shè)為表格*/
width: 100%;
}
nav li {
display: table-cell; /*將li設(shè)為表格的單元格*/
text-align: center; /*使文本垂直居中*/
vertical-align: middle;
}
nav a {
display: block; /*將a設(shè)為塊級(jí)元素*/
padding: 10px 15px;
color: #404040;
text-decoration: none;
}
nav a:hover {
color: #fff;
background-color: #ff7f00;
}

這是CSS樣式表部分的代碼，通過(guò)設(shè)置ul、li、a的display屬性來(lái)實(shí)現(xiàn)導(dǎo)航欄的布局。如需修改字體大小、顏色等屬性，可在對(duì)應(yīng)的屬性后添加相應(yīng)的值。

這就是使用CSS樣式表制作導(dǎo)航欄的簡(jiǎn)單例子。通過(guò)不同的樣式設(shè)置，還可實(shí)現(xiàn)更加吸引人的導(dǎo)航欄效果。