Tìm hiểu cách tạo phân trang bằng CSS
Cách tạo phân trang
Tự mình thử »
Bước 1] Thêm HTMLThí dụ
Thí dụ
/* Liên kết phân trang */
phân trang một {
màu. màu đen;
trôi nổi. bên trái;
đệm. 8px 16px;
trang trí văn bản. không ai;
chuyển tiếp. màu nền. 3s;
}
/* Tạo kiểu cho liên kết đang hoạt động/hiện tại */
phân trang một. tích cực {
màu nền. màu xanh da trời;
màu. trắng;
}
/* Thêm màu nền xám khi di chuột qua */
phân trang một. bay lượn. không phải[. đang hoạt động] {màu nền. #ddd;}
Truy cập Hướng dẫn phân trang CSS của chúng tôi để tìm hiểu thêm về phân trang
Tạo phân trang khá đơn giản, bạn có thể dễ dàng thực hiện điều đó bằng cách sử dụng Bootstrap và JavaScript. Tuy nhiên, trong bài viết này, chúng tôi sẽ sử dụng HTML và CSS để tạo phân trang.
Phân trang hữu ích khi trang web chứa nhiều nội dung trên một trang và một trang sẽ không đẹp với tất cả các chủ đề đó cùng nhau. Rất ít trang web sử dụng cuộn để tránh phân trang và ngược lại. Nhưng giao diện đẹp nhất đi kèm với sự kết hợp giữa cuộn và phân trang. Là nhà phát triển, bạn có thể đặt một vài nội dung trên một trang để làm cho trang đó có thể cuộn được một chút cho đến khi nó gây khó chịu. Sau đó, bạn có thể sử dụng phân trang để rời khỏi những nội dung trước đó và chuyển sang trang nội dung mới nhưng chủ đề sẽ giống nhau
Tạo cấu trúc. Trong phần này, chúng ta sẽ chỉ tạo cấu trúc trang web cơ bản của phân trang. Ở đây chúng ta cũng sẽ đính kèm thuộc tính title để người dùng có thể biết loại nội dung ở trang tiếp theo của phân trang là gì
- Mã HTML để tạo cấu trúc.
HTML