صفحه بندی در 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 یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز