Cách thực hiện - Chia điều hướng
Tìm hiểu cách tạo thanh "điều hướng phân chia" bằng CSS.
Chia điều hướng
Tạo thanh điều hướng phân chia
Bước 1) Thêm HTML:
Ví dụ
<div class="topnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about" class="split">Help</a>
</div>
Bước 2) Thêm CSS:
Ví dụ
/*
Create a top navigation bar with a black background color */
.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;
}
/* Create a
right-aligned (split) link inside the navigation bar */
.topnav
a.split {
float: right;
background-color: #04AA6D;
color: white;
}
Hãy tự mình thử »Mẹo: Để tạo các thanh điều hướng phản hồi nhanh, 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 đáp ứng của chúng tôi.
Mẹo: Hãy truy cập Hướng dẫn về Thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về các thanh điều hướng.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? 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