تعلم كيفية إنشاء ترقيم الصفحات استجابة باستخدام CSS.
بسيط ترقيم الصفحات
إذا كان لديك موقع على شبكة الانترنت مع الكثير من الصفحات، قد ترغب في إضافة نوع من ترقيم الصفحات على كل صفحة:
لإنشاء ترقيم الصفحات، على غرار قائمة HTML:
مثال
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} انها محاولة لنفسك » نشط وHoverable ترقيم الصفحات
تسليط الضوء على الصفحة الحالية مع .active الطبقة، واستخدام :hover محدد لتغيير لون كل وصلة الصفحة عند تحريك الماوس فوقها:
مثال
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} انها محاولة لنفسك » أزرار النشطة وHoverable مدورة
إضافة border-radius الخاصية إذا كنت ترغب في وزر تقريب "النشط" "تحوم":
مثال
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} انها محاولة لنفسك » Hoverable تأثير انتقال
إضافة transition الملكية إلى وصلات صفحة لخلق تأثير الانتقال على التحويم:
تحدها ترقيم الصفحات
استخدام border الخاصية لإضافة حدود إلى ترقيم الصفحات:
مدورة حدود
نصيحة: أضف حدود مدورة إلى الأول والأخير وصلتك في ترقيم الصفحات:
مثال
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
انها محاولة لنفسك » المسافة بين الروابط
تلميح: إضافة margin الخاصية إذا كنت لا ترغب في مجموعة وصلات الصفحة:
مثال
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
انها محاولة لنفسك » ترقيم الصفحات الحجم
تغيير حجم ترقيم الصفحات مع font-size الملكية:
ترقيم الصفحات توسيط
لتوسيط ترقيم الصفحات، والتفاف عنصر حاوية حوله (مثل <div> )، وإضافة 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";
}
انها محاولة لنفسك »