Cách thực hiện - Liên kết điều hướng viền dưới
Tìm hiểu cách tạo liên kết điều hướng có viền dưới (gạch chân) bằng CSS.
Liên kết điều hướng viền dưới
Tạo một menu điều hướng
Bước 1) Thêm HTML:
Ví 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:
Ví 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;
}
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.