CSS導航樣式可以通過各種方法實現,其中一種是使用三角形來增加導航的視覺吸引力和流暢性。
nav { background-color: #333; display: flex; justify-content: center; align-items: center; } nav ul { display: flex; list-style: none; padding: 0; margin: 0; } nav li { position: relative; } nav a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; font-weight: bold; } nav li::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: transparent transparent #fff transparent; } nav li:hover::before { border-color: transparent transparent #ffcc00 transparent; }
在上面的代碼中,我們創建了一個具有背景顏色、居中對齊和垂直居中的導航欄。我們還設置了一個列表來存儲導航項,每個導航項都具有相對位置。
使用偽元素:before,我們添加了一個三角形,在導航項下方居中顯示。該三角形使用透明邊框以及指定的顏色邊框顯示,并在用戶懸停在導航項上時更改顏色。
這種導航樣式具有易于編寫和適應不同的設計和主題的優點。對于更高級的導航效果和交互性,您可以在此基礎上添加其他功能。
上一篇css 對齊底部無效
下一篇css 導航欄緩慢下降