٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش CSS نمونه صفحه بندی

بیاموزید که چگونه یک صفحه بندی پاسخگو با استفاده از CSS ایجاد کنید. صفحه بندی ساده اگر وب سایتی با صفحات زیاد دارید ، ممکن است بخواهید به هر صفحه نوعی صفحه بندی اضافه کنید: مثال .pagination { display: inline-block;…

محمد یوسفی

13 جولای 2021

بیاموزید که چگونه یک صفحه بندی پاسخگو با استفاده از 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;
}

صفحه بندی متمرکز

برای قرار دادن صفحه بندی ، یک عنصر ظرف (مانند <div>) را دور آن بپیچید text-align:center

مثال

.center {
  text-align: center;
}

پودرهای سوخاری

تنوع دیگر صفحه بندی اصطلاحاً “آرد سوخاری” است:

مثال

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";
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها