021-28423015

صفحه بندی در 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" است:

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";
}
مشاهده مثال

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط