導航欄是網頁中常見的元素之一,要讓網頁有更好的視覺效果,導航欄的樣式也需要注意。其中加厚感是一種讓導航欄更加突出的視覺效果。
nav { background-color: #333; height: 50px; padding: 0 20px; position: fixed; width: 100%; z-index: 999; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; line-height: 50px; margin-right: 20px; } nav a { color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; text-transform: uppercase; transition: all .3s ease-in-out; } nav a:hover { color: #ffc107; border-bottom: 5px solid #ffc107; }
以上是一個基本的導航欄樣式,我們可以通過設置導航欄下方的邊框來達到加厚感的效果。當鼠標懸停在導航欄上時,下方邊框的顏色也會變化,同時加粗,提升視覺效果。
代碼中的關鍵是在導航欄a標簽的:hover偽類中,添加了border-bottom屬性,來設置下方邊框的樣式。同時,設置了過渡效果,讓顏色和加厚效果更加平滑。
在實際使用中,我們也可以適當調整下方邊框的粗細和顏色,來達到不同的視覺效果。