تعلم كيفية إنشاء ترقيم للصفحات يستجيب لحجم الشاشة باستخدام CSS.
ترقيم الصفحات البسيط
إذا كان موقع الويب الخاص بك يحتوي على العديد من الصفحات، فقد ترغب في إضافة نوع من ترقيم الصفحات إلى كل صفحة:
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ترقيم تفاعلي مع CSS
في هذا المثال، سنستخدم بادئين لإنشاء ترقيم صفحات تفاعلي:
.active: سنستخدم هذه الخاصة لتظليل الصفحة التي يتم عرضها حاليًا (الصفحة العضوية) بشكل مختلف عن باقي الصفحات.
المُحدد :hover: سنستخدم هذا المُحدد لتغيير لون كل رابط للصفحة عند استخدام الفأرة فوقه.
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
أزرار دائرية تفاعلية مع CSS
« أضف الخاصية border-radius إذا كنت تريد أزرار “نشطة” و “عند تحريك الماوس” دائرية الشكل: »
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
تأثير الانتقال عند تحريك الماوس (“Hoverable Transition Effect”)
“Hoverable Transition Effect” هو مصطلح يُستخدم في تصميم الويب لوصف تأثير الانتقال الذي يحدث عند تحريك الماوس فوق عنصر ما على الصفحة.
يمكن استخدام تأثيرات الانتقال لجعل عناصر الصفحة أكثر تفاعلية وجاذبية للمستخدمين.
.pagination a {
transition: background-color .3s;
}
ترقيم صفحات محدد بحواف
.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;
}
المسافة بين الروابط
نصيحة: أضف خاصية الهامش إذا كنت لا تريد تجميع روابط الصفحة:
.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على عنصر الحاوية: أضف الخاصيةtext-align: centerإلى عنصر الحاوية الذي لففت به ترقيم الصفحات. هذه الخاصية تخبر المتصفح بمحاذاة المحتوى النصي داخل العنصر إلى الوسط.
.center {
text-align: center;
}
امثله اكثر
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<p>Next/Previous buttons:</p>
<div class="pagination">
<a href="#">❮</a>
<a href="#">❯</a>
</div>
<p>Navigation pagination:</p>
<div class="pagination">
<a href="#" class="active">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</body>
</html>
Breadcrumbs
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";
}
