CSS導航置頂下面是一種非常流行的網頁設計方式。這種設計方式可以讓網頁的導航欄一直保持在頁面的頂部,不管用戶向下滾動多少內容,都能夠很方便地進行導航。在這種設計方式下,網頁的其他內容則會滾動到導航欄的下面,直到用戶滾動回到頁面的頂部。
<nav class="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </nav>
實現這種布局的方法是使用CSS中的position屬性,將導航欄固定在瀏覽器窗口的頂部。同時,為了使得其他內容不會被導航欄遮擋,需要為其他內容設置一個與導航欄高度相等的margin-top屬性。
.navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; z-index: 999; } .navbar-nav { display: flex; align-items: center; justify-content: space-around; list-style: none; height: 50px; margin: 0; padding: 0; } .nav-item { height: 100%; } .nav-link { color: #fff; text-decoration: none; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 1rem; } main { margin-top: 50px; }
總之,CSS導航置頂下面是一種優秀的網頁設計方式,可以增強用戶體驗,提高網站的交互性。
上一篇css將內容設置為橫向