CSS sahifalash

CSS yordamida moslashuvchan sahifalash (pagination) yaratishni o‘rganing.

Agar saytingizda ko‘p sahifa bo‘lsa, har bir sahifaga biror turdagi sahifalash qo‘shishingiz mumkin.

Sahifalash odatda tartibsiz ro‘yxat (<ul>) ichiga olingan havolalar ketma-ketligidir. Har bir havola alohida sahifa raqamini ifodalaydi. Bundan tashqari, "oldingi" va "keyingi" boshqaruvlari ham bo‘ladi:

Misol

Oddiy sahifalash:

.pagination {
display: flex;
justify-content: center;
list-style: none; /* remove list bullets */
padding: 0px;
}

.pagination li a {
display: block; /* let links fill the list item */
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px; /* add rounded borders */
}

O‘zingiz sinab ko‘ring »

Misol tahlili

Sahifalash konteynerini quyidagicha ushlab kelamiz:

display: flex; — sahifa raqamlarini gorizontal joylashtirish uchun
justify-content: center; to center align them
list-style: none; — ro‘yxat belgilarini olib tashlash uchun

Sahifa raqamlarining ko‘rinishi uchun <li> elementlari ichidagi <a> elementlariga display, padding, text-decoration, border, background-color, color, font-size va border-radius kabi xossalar bilan uslub beramiz.

Faol klassli sahifalash

Foydalanuvchi qaysi sahifada ekanini ko‘rsatish uchun joriy faol sahifani .active klassi bilan ajratib ko‘rsatish:

Misol

.active klassli sahifalash:

.pagination li a.active {
background-color: #4CAF50;
color: white;
}

O‘zingiz sinab ko‘ring »

O‘chirilgan klassli sahifalash

Agar foydalanuvchi hozir oxirgi sahifada bo‘lsa, "Keyingi" tugma o‘chirilgan bo‘lishi kerak.

Bu yerda .disabled klassini qo‘shib, "Keyingi" tugmani o‘chirilgan qilish maqsadida color, cursor va pointer-events xossalarini belgilaymiz:

Misol

.disabled klassli sahifalash:

.pagination li a.disabled {
color: #dddddd;
cursor: not-allowed;
pointer-events: none;
}

O‘zingiz sinab ko‘ring »

Sahifalash ichki sahifalari

Continue learning about CSS pagination:

Pagination Styles - hover effects, transitions, breadcrumbs

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish