CSS – صفحهبندی (Pagination)
صفحهبندی ساده
اگر وبسایت شما صفحات زیادی دارد، ممکن است بخواهید به هر صفحه یک سیستم صفحهبندی اضافه کنید:
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
صفحهبندی فعال و قابل واکنش
با استفاده از کلاس .active
میتوانید صفحه فعلی را برجسته کنید و با استفاده از :hover
میتوانید رنگ لینکهای صفحات را در هنگام حرکت ماوس تغییر دهید:
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
دکمههای فعال و قابل واکنش با گوشههای گرد
برای ایجاد دکمههای گرد، از ویژگی border-radius
استفاده کنید:
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
افکت انتقال در هنگام هاور
برای ایجاد افکت انتقال هنگام حرکت ماوس روی لینکها، از ویژگی transition
استفاده کنید:
.pagination a {
transition: background-color .3s;
}
صفحهبندی با حاشیه
برای اضافه کردن حاشیه به لینکهای صفحهبندی، از ویژگی border
استفاده کنید:
.pagination a {
border: 1px solid #ddd; /* خاکستری */
}
حاشیههای گرد برای اولین و آخرین لینک
برای ایجاد حاشیههای گرد برای اولین و آخرین لینک، از این استایل استفاده کنید:
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
فاصله بین لینکها
برای اضافه کردن فاصله بین لینکها از ویژگی margin
استفاده کنید:
.pagination a {
margin: 0 4px; /* برای بالا و پایین 0 و برای چپ و راست 4px */
}
تغییر اندازه صفحهبندی
برای تغییر اندازه صفحهبندی، از ویژگی font-size
استفاده کنید:
.pagination a {
font-size: 22px;
}
صفحهبندی مرکزی
برای مرکز کردن صفحهبندی، میتوانید یک عنصر کانتینر مانند <div>
را دور صفحهبندی قرار داده و ویژگی text-align: center
را به آن اضافه کنید:
<div class="center">
<div class="pagination">
<!-- لینکها -->
</div>
</div>
.center {
text-align: center;
}
نانریزهها (Breadcrumbs)
یک نوع دیگر از صفحهبندی که به “نانریزهها” معروف است:
<ul class="breadcrumb">
<li><a href="#">خانه</a></li>
<li><a href="#">تصاویر</a></li>
<li><a href="#">تابستان 15</a></li>
<li>ایتالیا</li>
</ul>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {
display: inline;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/ 0a0";
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام