Cách tạo: Liên kết định hướng với viền dưới chân

Học cách sử dụng CSS để tạo liên kết định hướng với viền dưới chân (dưới dạng gạch dưới).

Liên kết định hướng với viền dưới chân

Trang chủ Tin tức Liên hệ

Thử trực tiếp

Tạo menu định hướng

Bước 1 - Thêm HTML:

<div class="topnav">
  <a href="#home" class="active">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
</div>

Bước 2 - Thêm CSS:

/* Thêm màu nền đen cho thanh định hướng trên đầu trang */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Đặt样式 cho liên kết trong thanh định hướng */
.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;
}

Thử trực tiếp

Trang liên quan

Hướng dẫn:Cách tạo thanh điều hướng đầu trang tương tác

Hướng dẫn:Thanh điều hướng CSS