1. Thanh phân trang cơ bản trong CSS

Nếu bạn có một trang web có nhiều trang, bạn có thể  thêm thanh phân trang vào mỗi trang

Ví dụ:

Đánh dấu trang hiện tại bằng một lớp .active và sử dụng bộ chọn :hover để thay đổi màu của từng liên kết trang khi di chuyển chuột qua chúng

Thêm thuộc tính border-radius nếu bạn muốn có nút “đang hoạt động” và “di chuột qua” được làm tròn

Thêm thuộc tính transition vào các liên kết trang để tạo hiệu ứng chuyển tiếp khi di chuột

Ví dụ:

2. Thanh phân trang có viền trong CSS

Sử dụng thuộc tính border để thêm đường viền vào thanh phân trang

Mẹo: Thêm thuộc tính margin nếu bạn muốn các liên kết trang tách biệt với nhau

Ví dụ:

3. Thay đổi kích thước của thanh phân trang trong CSS

Để thay đổi kích thước của thanh phân trang chúng ta sử dung thuộc tính font-size

Ví dụ:

4. Căn giữa thanh phân trang trong CSS

Để căn giữa thanh phân trang, hãy để nó trong một vùng chứa như <div> và sử dụng thuộc tính text-align: center

Ví dụ:

5. Breadcrumbs trong CSS

Một biến thể khác của thanh phân trang được gọi là “breadcrumbs”

Ví dụ: