62. Phân Trang Trong CSS

Phân trang trong CSS:

Phân trang (pagination) trong CSS thường được thực hiện bằng cách tạo danh sách các liên kết để điều hướng qua các trang. Dưới đây là một ví dụ cơ bản về cách tạo phân trang bằng CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .pagination {
      display: flex;
      list-style: none;
      padding: 0;
    }

    .pagination li {
      margin: 0 5px;
    }

    .pagination a {
      text-decoration: none;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      color: #333;
    }

    .pagination a:hover {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một danh sách (<ul>) có class .pagination để chứa các liên kết phân trang.
Sử dụng display: flex; để hiển thị các liên kết theo hàng ngang.
Sử dụng list-style: none; để loại bỏ dấu đầu dòng mặc định của danh sách.
Điều chỉnh khoảng cách giữa các liên kết bằng cách thêm margin vào thẻ <li>.
Sử dụng text-decoration: none;, padding, border, border-radius, và color để tạo kiểu cho liên kết.
Sử dụng :hover để thay đổi nền khi người dùng hover vào liên kết.

Lưu ý rằng ví dụ trên chỉ tạo một danh sách phân trang cơ bản. Bạn có thể tùy chỉnh kiểu dáng và sử dụng JavaScript để thực hiện chức năng chuyển trang thực tế.

Leave a Comment Cancel Reply