CSS導航欄虛框是指當用戶點擊導航欄菜單時,在導航欄菜單文字周圍會出現虛線框,以提示用戶當前所在的頁面位置。
.nav{ display: flex; justify-content: center; align-items: center; height: 50px; background-color: #000000; } .nav li{ margin: 0 20px; list-style: none; } .nav li a{ color: #ffffff; text-decoration: none; border: none; padding: 5px 10px; } .nav li a:focus{ outline: 2px dashed #ffffff; }
在上述代碼中,我們使用:focus偽類來實現導航欄虛框效果。當用戶通過Tab鍵或鼠標點擊菜單時,a元素會獲取焦點,此時設置a元素的outline屬性為2px虛線邊框,并設置顏色為白色。
需要注意的是,:focus偽類只適用于可聚焦元素,如a元素、按鈕等。如果需要為div或其他非聚焦元素設置虛框,則可以添加tabindex屬性來使其可聚焦。
綜上所述,使用CSS實現導航欄虛框效果可以大大提高網站的用戶體驗,同時也可以增強網站的可用性。
上一篇mysql57登陸密碼
下一篇css導航邊框線