صفحه‌بندی ساده
اگر وبسایت شما صفحات زیادی دارد، ممکن است بخواهید به هر صفحه یک سیستم صفحه‌بندی اضافه کنید:
<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";
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام