在網(wǎng)頁設(shè)計中，導(dǎo)航欄是非常重要的。它可以讓用戶快速找到需要的頁面，也可以讓網(wǎng)站在視覺上更加美觀。在這篇文章中，我們將學(xué)習(xí)如何使用div和CSS創(chuàng)建一個簡單的橫向?qū)Ш綑凇?/p>

<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系方式</a></li>
</ul>
</div>

使用上面的代碼，在HTML文件中創(chuàng)建一個導(dǎo)航欄，這個導(dǎo)航欄是由一個帶有"nav"類名的div包裹著一個ul元素和四個li元素組成的。在每個li元素中都有一個帶有#鏈接的a元素。這些鏈接可以用于將用戶帶到網(wǎng)站的其他頁面。

.nav {
background-color: #333;
overflow: hidden;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav li a:hover {
background-color: #111;
}

接下來是CSS代碼。它將通過.nav類來樣式化我們的導(dǎo)航欄。為了將導(dǎo)航欄限制在父元素之內(nèi)，我們需要為它的“overflow”屬性設(shè)置“hidden”。我們還將“l(fā)ist-style-type”設(shè)置為“none”，從而將圓點隱藏在每個列表項之前。

“padding”用于增加鏈接區(qū)域周圍的空間。我們還使用“display: block”將每個鏈接轉(zhuǎn)換為塊級元素。這將使它們按照垂直方向的一行對齊。最后，“hover”偽類用于在鼠標懸停在鏈接上時更改背景顏色。

這就是使用div和CSS創(chuàng)建簡單橫向?qū)Ш綑诘耐暾^程。您可以根據(jù)自己的需要對其進行更改和樣式化。