導航欄是一種常見的網頁元素，用于導航網頁中的各個頁面。使用 CSS 可以輕松制作導航欄，下面是一個簡單的圖解教程。

首先，我們需要創建一個新的 HTML 元素，并將其命名為“nav”。代碼如下：

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

nav > ul > li {

color: #f00;

font-size: 18px;

font-weight: bold;

nav > ul > li a {

color: #007bff;

text-decoration: none;

nav > ul > li a {

background-color: #f00;

border: none;

padding: 10px;

nav > ul > li a:hover {

background-color: #007bff;

border: none;

padding: 10px;

nav > ul > li a {

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

上述就是使用 CSS 制作導航欄的簡單圖解教程，希望對您有所幫助。