أمثلة على ترقيم صفحات 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;
}
توسيط ترقيم الصفحات
لتوسيط ترقيم الصفحات ، قم بلف عنصر حاوية (مثل <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";
}