CSS標簽選擇菜單是一個經典的橫向菜單欄,它是通過CSS標簽選擇器技術來實現的。下面是一個簡單的實例:
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
#menu{
list-style: none;
margin: 0;
padding: 0;
}
#menu li{
display: inline-block;
}
#menu a{
display: block;
margin: 0 10px;
padding: 10px;
text-decoration: none;
color: #000;
}
#menu a:hover{
background-color: #333;
color: #fff;
}
以上代碼中,我們創建了一個無序列表,每個列表項是一個鏈接。然后我們使用CSS選擇器來選擇列表元素和鏈接元素,并應用一些樣式
列表項和鏈接的樣式分別由 #menu li 和 #menu a選擇器設置。我們通過 display: inline-block 讓列表項們水平展示, 并通過設置 margin 和 padding 來控制間隔大小。鏈接的樣式設置 color 為黑色,設置了一些樣式來使鏈接在懸停時變化。
這個CSS標簽選擇菜單看上去很棒。你可以根據實際情況來調整背景顏色、字體和鏈接樣式等,使它更符合你的品牌風格。