CSS橫向?qū)Ш綑谔匦乾F(xiàn)代網(wǎng)站設(shè)計中一個非常常見的元素。很多網(wǎng)站都采用了非常美觀的橫向?qū)Ш綑趤矸奖阌脩魹g覽網(wǎng)站的各個頁面。下面我們來看一下如何使用CSS實現(xiàn)一個簡單的橫向?qū)Ш綑谔匦А?/p>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</body>
</html>上面的代碼使用了
- 標簽來創(chuàng)建一個無序列表，然后使用
- 標簽創(chuàng)建了四個列表項，其中每個列表項都包含一個元素，用于跳轉(zhuǎn)到對應(yīng)的頁面。然后使用一些簡單的CSS樣式來設(shè)置導(dǎo)航欄的外觀和行為，包括設(shè)置列表項浮動、設(shè)置鼠標懸停時的背景色等。
最終的效果如下：
