CSS3是一種強(qiáng)大的前端樣式語(yǔ)言，可以用于創(chuàng)建漂亮和交互式的網(wǎng)頁(yè)。在本文中，我們將探討如何使用CSS3創(chuàng)建橫向?qū)Ш綑凇?/p>
<nav class="menu"> <ul> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">服務(wù)</a></li> <li><a href="#">關(guān)于</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </nav>
我們使用
.menu {
width: 100%;
background-color: #333;
overflow: auto;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover {
background-color: #ddd;
color: black;
}在上面的CSS代碼中，我們將菜單的背景顏色設(shè)置為黑色，并將列表項(xiàng)表現(xiàn)為針對(duì)瀏覽器設(shè)置的flexbox。我們使用文本對(duì)齊和內(nèi)邊距來(lái)格式化鏈接，當(dāng)用戶將鼠標(biāo)懸停在鏈接上時(shí)，將更改鏈接的顏色和背景顏色。
現(xiàn)在，查看您的網(wǎng)頁(yè)，導(dǎo)航欄應(yīng)該橫向顯示并以您指定的樣式呈現(xiàn)。這是一個(gè)簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)一個(gè)漂亮的導(dǎo)航欄。