Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

CSS - Phân trang: Hướng dẫn cho người mới bắt đầu

Xin chào các ngôi sao tương lai của thiết kế web! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS phân trang. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn trong hành trình thú vị này. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các phân trang đẹp và chức năng như một chuyên gia!

CSS - Pagination

Phân trang là gì?

Trước khi chúng ta bắt đầu, hãy nói về phân trang thực sự là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách. Thay vì tất cả văn bản được nhét vào một trang không kết thúc, nó được chia thành các phần nhỏ hơn dễ quản lý - đó chính là phân trang trong thế giới thực. Trên các trang web, phân trang giúp chia các danh sách nội dung dài (như kết quả tìm kiếm hoặc bài viết blog) thành các trang riêng biệt. Nó giống như给了 người dùng một nút "đảo trang" ảo!

Bây giờ, hãy c rolled lên tay áo và bắt đầu nào!

Bước 1: Thêm thẻ HTML

Đầu tiên, chúng ta cần tạo cấu trúc cơ bản của phân trang. Hãy tưởng tượng này như xây dựng khung xương của thiết kế của chúng ta.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

Trong ví dụ này, chúng ta đang tạo một <div> với lớp "pagination". Bên trong, chúng ta có một số <a> tags (liên kết) đại diện cho số trang của chúng ta. &laquo; và &raquo; là các ký tự đặc biệt cho mũi tên trái và phải -听起来很有趣 phải không?

Bước 2: Định nghĩa các lớp CSS

Bây giờ chúng ta đã có khung xương, hãy thêm một chút phong cách! Chúng ta sẽ bắt đầu với một chút CSS cơ bản để cho phân trang của chúng ta có hình dạng.

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

Đây là những gì nó làm:

  • display: inline-block; làm cho容器 phân trang của chúng ta hành xử như một phần tử inline nhưng cho phép chúng ta đặt chiều rộng và chiều cao.
  • Chúng ta đang định dạng tất cả các <a> tags bên trong phân trang div.
  • float: left; làm cho các liên kết của chúng ta hàng hóa theo chiều dọc.
  • padding thêm một chút không gian xung quanh văn bản của chúng ta.
  • text-decoration: none; loại bỏ gạch chân từ các liên kết của chúng ta.

Bước 3: Các phong cách liên kết phân trang

Hãy làm cho các liên kết phân trang của chúng ta trông thú vị hơn!

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Mã này làm hai điều thú vị:

  1. Nó định dạng trang "active" (trang hiện tại) với nền xanh lá cây và văn bản trắng.
  2. Nó thêm hiệu ứng hover vào tất cả các liên kết khác, thay đổi màu nền khi bạn di chuột qua chúng.

Phân trang đơn giản CSS

Chúc mừng! Bạn vừa tạo ra một phân trang đơn giản và chức năng. Nhưng tại sao dừng lại ở đó? Hãy khám phá một số biến thể thú vị hơn!

Phân trang Active và Hoverable

Muốn làm cho phân trang của bạn tương tác hơn? Thử này:

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Thuộc tính transition thêm hiệu ứng thay đổi màu nền mượt mà khi di chuột qua các liên kết. Nó như魔法!

Nút phân trang Active và Hoverable tròn

Hãy cho các nút của chúng ta một chút cong:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius làm tròn các góc của các nút của chúng ta, trong khi margin thêm một chút không gian giữa chúng. Liệu có phải nó trông rất đẹp không?

Hiệu ứng Transition Hoverable

Muốn thêm một chútazz? Thử hiệu ứng này:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Bây giờ các liên kết của bạn sẽ hơi lớn lên khi di chuột qua. Nó như thể chúng đang mời bạn nhấp vào!

Phân trang có viền

Hãy thêm một chút viền để làm cho phân trang của chúng ta nổi bật hơn:

.pagination a {
border: 1px solid #ddd;
}

Dòng này thêm một viền màu xám nhạt xung quanh mỗi liên kết. Nó thật tuyệt vời cách một thay đổi nhỏ có thể tạo ra sự khác biệt lớn!

Viền tròn

Muốn làm mềm các viền? Hãy làm tròn chúng:

.pagination a {
border-radius: 50%;
}

Điều này biến các nút vuông của chúng ta thành các hình tròn hoàn hảo. Thật tuyệt vời phải không?

Khoảng cách giữa các liên kết

Đôi khi, chúng ta cần một chút không gian để thở:

.pagination a {
margin: 0 4px;
}

Điều này thêm một khoảng trống nhỏ giữa mỗi liên kết, tạo cho phân trang của bạn một cảm giác宽敞.

Kích thước phân trang CSS

Một kích thước không phù hợp với tất cả. Hãy học cách điều chỉnh kích thước:

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

Thử nghiệm với các giá trị này để tìm kích thước hoàn hảo cho thiết kế của bạn!

Phân trang giữa trang

Muốn phân trang của bạn nằm giữa trang?

.pagination {
text-align: center;
}

Dòng này làm cho toàn bộ khối phân trang của bạn nằm giữa trang. Thật kỳ diệu!

Phân trang với các nút Trước và Sau

Hãy thêm một few navigation buttons:

<div class="pagination">
<a href="#">&laquo; Trước</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Tiếp &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Điều này thêm các nút "Trước" và "Tiếp" vào phân trang và định dạng chúng khác nhau.

Phân trang với Breadcrumb

Muốn hiển thị cho người dùng họ đang ở đâu trong chuỗi trang của bạn? Thử này:

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Trang 2 của 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

Điều này thêm một chỉ báo văn bản hiển thị trang hiện tại và tổng số trang.

Phân trang với List

Cuối cùng, hãy thử một phong cách phân trang theo danh sách:

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Điều này tạo ra một bố cục phân trang sạch sẽ theo danh sách.

Và thế là xong, các bạn! Bạn vừa học được cách tạo phân trang CSS. Nhớ rằng, chìa khóa để thành thạo các kỹ thuật này là thực hành. Vậy hãy tiếp tục thử nghiệm với các phong cách này, kết hợp chúng và tạo ra các thiết kế phân trang độc đáo của riêng bạn. Ai biết được, bạn có thể tạo ra điều gì lớn lao trong thiết kế web!

Chúc các bạn may mắn và hãy để các trang của bạn luôn được phân trang hoàn hảo!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Nút
Hướng Dẫn Tiếp Theo:
CSS - Biến