CSS

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

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

التاريخ

31 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1717

المواضيع

24
الشروحات chevron_left CSS Pagination chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

</> CSS Breadcrumbs
تنقل للصفحات المتفرعة في لغة CSS

عمل شريط تنقل صفحات متفرعة من صفحات أخري في لغة CSS.

CSS Breadcrumbs
ul.breadcrumb 
{
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
مصطلحات الدرس
Pagination
Pagination

ترقيم الصفحات

Simple
Simple

بسيط

Active
Active

نشط / فعال

Hoverable
Hoverable

قابل للتحويم

Class
Class

فئة

Hover
Hover

يحوم

Center
Center

في المنتصف

Text-Align
Text-Align

محاذاة النص

Breadcrumbs
Breadcrumbs

شكل قطع الخبز

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.