Cách TO - Điều hướng hàng đầu
Tìm hiểu cách tạo thanh điều hướng trên cùng bằng CSS.
Thanh điều hướng trên cùng
Tạo một thanh điều hướng trên cùng
Bước 1) Thêm HTML:
Thí dụ
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
Bước 2) Thêm CSS:
Thí dụ
/*
Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add
a color to the active/current link */
.topnav
a.active {
background-color: #04AA6D;
color: white;
}
Mẹo: Để tạo các thanh điều hướng đáp ứng, thân thiện với thiết bị di động, hãy đọc hướng dẫn Cách thực hiện - Điều hướng hàng đầu thích ứng của chúng tôi .
Mẹo: Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng.
Bạn đã từng nghe về W3Schools Spaces ? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng