Làm thế nào để - Liên kết điều hướng biên giới dưới cùng
Tìm hiểu cách tạo các liên kết điều hướng có đường viền dưới cùng (gạch dưới) bằng CSS.
Liên kết điều hướng đường viền dưới cùng
Tạo menu điều hướng
Bước 1) Thêm HTML:
Thí dụ
<div class="topnav">
<a href="#home"
class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</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;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.topnav a:hover {
border-bottom: 3px solid red;
}
.topnav
a.active {
border-bottom: 3px solid red;
}
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.