大多數網站都有一個導航欄，通常都放置在網站的最頂部或者為左/右側欄，并且構建一個好看的導航欄是非常重要的。今天我將會分享如何創建一個CSS編寫的全屏導航欄。 首先，在HTML中創建一個標準的導航欄，以下是一個例子:

您可以添加更多的列表項并根據需要添加子菜單。然后，在CSS中為導航欄添加樣式。以下是代碼。

nav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
}
nav li a:hover {
background-color: #111;
}

解析上述代碼塊： - nav用于為導航欄創建樣式。 - 設置overflow: hidden是因為float在nav寬度之外。 - 將nav固定在頁面頂部并處于所有內容的頂部。 - nav ul將導航欄中的列表填充和邊距都設置為零并禁用默認樣式。 - nav li讓所有導航欄中的列表項都向左浮動。 - nav li a為導航中的鏈接元素添加樣式，實現高亮、加粗以及斜體。 - 當用戶將鼠標懸停在鏈接上時，應用背景色。 此時，導航欄已經可以正常工作，但我們需要將它放在網站整個屏幕的最上方。要實現此目的，我們需要添加以下代碼：

body {
margin: 0;
padding: 0;
}

此樣式將網站的內容區域縮小以適應導航欄。我們同時還需要設置導航欄中的列表項，使其能夠占據整個屏幕。以下是完整代碼：

body {
margin: 0;
padding: 0;
}
nav {
background-color: #333;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
width: 25%;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
}
nav li a:hover {
background-color: #111;
}

在上面的代碼塊中，nav li元素尺寸為25%，這4個列表項就可以占據整個屏幕的寬度。 以上就是如何創建CSS編寫的全屏導航欄的教程。您可以根據自己的需要進行修改和修改，以創建適合您的網站的導航欄。Happy Coding!