CSS

CSS Pagination
ترقيم الصفحات بلغة CSS

سوف تتعلم في هذا الدرس عمل أزرار ترقيم الصفحات للتنقل داخل صفحة الويب لصفحات أخري إذا كانت الصفحة الحالية تعرض جزء من البيانات وباقي البيانات موزع علي صفحات أخري  بلغة CSS.

التاريخ

31 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2087

المواضيع

24
الشروحات chevron_left CSS Pagination chevron_left CSS

CSS Pagination
ترقيم الصفحات بلغة CSS

</> CSS Pagination
ترقيم الصفحات بلغة CSS

ترقيم الصفحات في لغة CSS هو عبارة عن زر أو مجموعة أزرار تكون أسفل كل الصفحات التي تعرض فيها البينات بشكل جزئي وتستخدم في عرض باقي البيانات في صفحات منفصلة وعادة ما يكون في نهاية الصفحات.

</> CSS create pagination
إنشاء تعدد الصفحات في لغة CSS

يتم عمل ترقيم الصفحات بلغة CSS عن طريق عنصر <a> ثم إضافة له بعض التأثيرات مثل اللون والحجم والإطار وإضافة سهمين سهم أخر صفحة وسهم أول صفحة.

CSS create pagination
.pagination a
{
  color: black;
  float: left;
  padding: 10px 20px;
  text-decoration: none;
}

</> CSS active current page
تفعيل الصفحة الحالية بلون مختلف في لغة CSS

إضافة كلاس active بلون مختلف لتمييز الصفحة الحالية في ترقيم الصفحات وتغيير اللون والخلفية في لغة CSS.

CSS active current page

إضافة كلاس active لتمييز الصفحة الحالية بلون مختلف في لغة CSS.

.active
{
  background-color:#007bff;
  color:white !important;
}
CSS rounded current page

عمل تدوير للإطار للصفحة الحالية في لغة CSS.

</> CSS bordered pagination
عمل ترقيم الصفحات بإطارات في لغة CSS

إضافة إطار للترقيم عن طريق خاصية border في لغة CSS لتحديد الروابط ولكي تعطي مظهراً جذاباً.
CSS bordered pagination

عمل ترقيم الصفحات بإطارات في لغة CSS.

.pagination a
{
  color: black;
  float: left;
  padding: 10px 20px;
  text-decoration: none;
  border:black solid 1px;
}

</> CSS Centered Pagination
توسيط ترقيم الصفحات في لغة CSS

توسيط ترقيم الصفحات في غلة CSS عن طريق إضافة pagination داخل div ثم إضافة خاصية text-align:center لأن pagination لا يمكن توسيطها لأن لها float:left.

CSS Centered Pagination

توسيط ترقيم الصفحات في لغة CSS.

.center {
  text-align: center;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات