Cách tạo: Thanh điều hướng phân tách

Học cách sử dụng CSS để tạo thanh điều hướng phân tách.

Tạo thanh điều hướng phân tách

Bước 1 - Thêm HTML:

<div class="topnav">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
  <a href="#about" class="split">Trợ giúp</a>
</div>

Bước 2 - Thêm CSS:

/* Tạo thanh điều hướng trên cùng có nền đen */
.topnav {
  màu nền: #333;
  dư lượng: ẩn;
}
/* Đặt樣式 cho liên kết trong thanh điều hướng */
.topnav a {
  canh trái;
  màu: #f2f2f2;
  canh giữa;
  keo dán: 14px 16px;
  không có hiệu ứng văn bản;
  cỡ chữ: 17px;
}
/* Thay đổi màu của liên kết khi con trỏ chuột ở trên */
.topnav a:hover {
  màu nền: #ddd;
  màu: đen;
}
/* Tạo một liên kết phân tách phải đối diện trong thanh điều hướng */
.topnav a.split {
  canh phải;
  màu nền: #04AA6D;
  màu: trắng;
}

亲自试一试

相关页面

Giáo trình:Cách tạo thanh điều hướng đầu trang响应

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