صفحه‌بندی (Pagination) با استفاده از CSS
در اینجا مثال‌هایی از صفحه‌بندی (Pagination) با استفاده از CSS آورده شده است. صفحه‌بندی برای تقسیم محتوا به صفحات یا بخش‌های جداگانه استفاده می‌شود و معمولاً شامل کنترل‌های ناوبری برای جابجایی بین این صفحات است.
صفحه‌بندی ساده:
<div class=“pagination”>
<a href=“#”>«</a>
<a href=”#”>1</a>
<a href=“#” class=“active”>2</a>
<a href=“#”>3</a>
<a href=“#”>4</a>
<a href=“#”>»</a>
</div>
.pagination {
display: flex;
justify-content: center;
list-style-type: none;
margin: 20px 0;
padding: 0;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 4px;
border-radius: 5px;
transition: background-color 0.3s;
}
.pagination a.active {
background-color: #4caf50;
color: white;
border: 1px solid #4caf50;
}
.pagination a:hover {
background-color: #ddd;
}
صفحه‌بندی شماره‌دار با افکت‌ها
.numbered-pagination {
text-align: center;
}
.numbered-pagination a {
display: inline-block;
margin: 0 5px;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 3px;
color: #555;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.numbered-pagination a:hover {
background: #007bff;
color: white;
}
.numbered-pagination a.prev,
.numbered-pagination a.next {
font-weight: bold;
}
.circular-pagination a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
border: 2px solid #007bff;
color: #007bff;
text-decoration: none;
transition: all 0.3s;
}
.circular-pagination a.active {
background: #007bff;
color: white;
}
.circular-pagination a:hover {
background: #0056b3;
color: white;
}
دیدگاهتان را بنویسید