مثال على تصفح 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";
}

جرب بنفسك