صفحه بندی در CSS
یادگیری CSSبا نحوه ایجاد صفحات ریسپانسیو با استفاده از CSS آشنا شوید.
صفحه بندی ساده
اگر شما دارای یک وب سایت با تعداد زیادی صفحات هستید، ممکن است بخواهید یک صفحه بندی را به هر صفحه اضافه کنید:
.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; /* Gray */
}
مشاهده مثالحاشیه های گرد
نکته: حاشیه های گرد را به اولین و آخرین لینک خود در صفحه بندی اضافه کنید:
.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 is for top and bottom. Feel free to change it */
}
مشاهده مثالاندازه صفحه بندی
اندازه صفحه بندی را با مقدار font-size تغییر دهید:
.pagination a {
font-size: 22px;
}
مشاهده مثالوسط چین کردن صفحه بندی
برای وسط چین کردن صفحه بندی، یک عنصر container (مانند <div>) را در اطراف آن با متن-align: center قرار دهید
.center {
text-align: center;
}
مشاهده مثالمثال های بیشتر
Next/Previous buttons:
Navigation pagination:
مشاهده مثالBreadcrumbs
تنوع دیگری از صفحه بندی به اصطلاح " Breadcrumbs" است:
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: "/\00a0";
}
مشاهده مثال
نظر شما
>