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

您可以添加更多的列表項并根據(jù)需要添加子菜單。然后，在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用于為導航欄創(chuàng)建樣式。 - 設置overflow: hidden是因為float在nav寬度之外。 - 將nav固定在頁面頂部并處于所有內(nèi)容的頂部。 - nav ul將導航欄中的列表填充和邊距都設置為零并禁用默認樣式。 - nav li讓所有導航欄中的列表項都向左浮動。 - nav li a為導航中的鏈接元素添加樣式，實現(xiàn)高亮、加粗以及斜體。 - 當用戶將鼠標懸停在鏈接上時，應用背景色。 此時，導航欄已經(jīng)可以正常工作，但我們需要將它放在網(wǎng)站整個屏幕的最上方。要實現(xiàn)此目的，我們需要添加以下代碼：

body {
margin: 0;
padding: 0;
}

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

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個列表項就可以占據(jù)整個屏幕的寬度。 以上就是如何創(chuàng)建CSS編寫的全屏導航欄的教程。您可以根據(jù)自己的需要進行修改和修改，以創(chuàng)建適合您的網(wǎng)站的導航欄。Happy Coding!