Cách tạo: Thanh định hướng hình tròn

Học cách sử dụng CSS để tạo thanh định hướng hình tròn.

Tạo thanh định hướng hình tròn

Bước 1 - Thêm HTML:

<div class="pill-nav">
  <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:

/* Đặt樣式 cho liên kết trong thanh định hướng hình tròn */
.pill-nav a {
  hiển thị: khối-inline;
  màu: đen;
  canh giữa văn bản;
  chèn: 14px;
  không có đường viền văn bản;
  cỡ chữ: 17px;
  radius góc: 5px;
}
/* Thay đổi màu của liên kết khi con trỏ chuột chạm vào */
.pill-nav a:hover {
  màu nền: #ddd;
  màu: đen;
}
/* Thêm màu cho liên kết hoạt động/hiện tại */
.pill-nav a.active {
  màu nền: dodgerblue;
  màu: trắng;
}

Thử trực tiếp

Trang liên quan

Giáo trình:Thanh điều hướng CSS

Giáo trình:Cách tạo thanh điều hướng trên cùng