مثال صفحات خلاصه‌سازی 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;}

آزمایش کنید

صفحات با قطره‌ای فعال و قابل لمس

اگر نیاز به دکمه‌های "active" و "hover" با قطره‌ای دارید، لطفاً اضافه کنید 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، قابل تغییر */
}

آزمایش کنید

اندازه صفحات

لطفاً از font-size ویژگی تغییر اندازه صفحات:

مثال

.pagination a {
  font-size: 22px;
}

آزمایش کنید

صفحات قرار داده شده در وسط

برای قرار دادن صفحات در وسط، از آن استفاده کنید که تنظیم شده است text-align:center عنصر حاوی (مثل <div>) آن را احاطه می‌کند:

مثال

.center {}}
  text-align: center;
}

آزمایش کنید

مثال‌های بیشتر

مثال

آزمایش کنید

کرمز

یکی از اشکال دیگر صفحه‌بندی به نام "crumbs" (کرمز) است:

مثال

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

آزمایش کنید