W3.CSS ro‘yxatlar
Ro‘yxatlar
W3.CSS toza va egiluvchan HTML ro‘yxatlarini yaratish uchun klasslarni taqdim etadi.
Ro‘yxatlarda chegaralar, ranglar, hover effektlari, kartochkalar, rasmlar va tugmalar bo‘lishi mumkin.
w3-ul klassi
w3-ul klassi ro‘yxatning standart belgilarini olib tashlaydi va ro‘yxat elementlariga pastki chegara qo‘shadi.
- Jill
- Eve
- Adam
Misollar
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
<li></li>
</ul>
O‘zingiz sinab ko‘ring »
Agar oxirgi ro‘yxat elementi ostida ham pastki chegara bo‘lishini istasangiz, ro‘yxatni bo‘sh element bilan yakunlang.
Chegarali ro‘yxat
Butun ro‘yxat atrofiga chegara qo‘shish uchun w3-border klassini qo‘shing.
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Ro‘yxat sarlavhasi
Ro‘yxat elementi sarlavhalar va boshqa HTML elementlarini o‘z ichiga olishi mumkin.
Names
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Kartochka ko‘rinishidagi ro‘yxat
w3-ul klassini kartochka klassi bilan birlashtiring.
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul w3-card">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Rangli ro‘yxatlar
Butun ro‘yxatni bo‘yash uchun ro‘yxatga W3.CSS rang klassini qo‘shing.
- Jill
- Eve
- Adam
Yoki alohida ro‘yxat elementlariga rang bering:
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li class="w3-green">Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Hover effektli ro‘yxatlar
w3-hoverable klassi ro‘yxat elementlariga hover effektini qo‘shadi.
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Har bir ro‘yxat elementiga alohida hover rangini ham berishingiz mumkin:
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Yopiladigan ro‘yxat elementlari
Ro‘yxat elementlari tugmalar va boshqa interaktiv elementlarni o‘z ichiga olishi mumkin.
Element ichida yopish tugmasini joylashtirish uchun w3-display-container klassidan foydalaning.
- Jill
- Eve
- Adam
Misol
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
O‘zingiz sinab ko‘ring »
HTML’ning × belgisi (×) yopish tugmalari uchun juda mos keladi.
Ichki bo‘shliqli ro‘yxat
Padding klasslari ro‘yxat elementlari ichidagi bo‘shliqni o‘zgartira oladi.
- Kichik padding
- Oddiy padding
- Katta padding
Misol
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Avatarli ro‘yxat
Ro‘yxat elementlari rasmlar, matn, tugmalar va boshqa elementlarni o‘z ichiga olishi mumkin.
Misol
<li class="w3-bar">
<img src="img_avatar2.png"
class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span>
</div>
</li>
O‘zingiz sinab ko‘ring »
w3-bar haqida ushbu darslikning keyingi qismlarida ko‘proq bilib olasiz.
Markazlashtirilgan ro‘yxat
w3-center klassi ro‘yxat elementlari kontentini markazlashtiradi.
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Ro‘yxat kengligi
Standart holatda ro‘yxatlar 100% kenglikka ega.
Ro‘yxatni torroq qilish uchun CSS’ning width yoki max-width xususiyatidan foydalaning.
- Jill
- Eve
- Adam
Misol
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
O‘zingiz sinab ko‘ring »
Turli o‘lchamdagi ro‘yxatlar
Ro‘yxat o‘lchamini o‘zgartirish uchun W3.CSS shrift o‘lchami klasslaridan foydalanish mumkin.
| Klass | O‘lcham |
|---|---|
w3-tiny |
Juda kichik |
w3-small |
Kichik |
w3-large |
Katta |
w3-xlarge |
Juda katta |
w3-xxlarge |
Juda-juda katta |
w3-xxxlarge |
Eng katta |
w3-jumbo |
Ulkan (jumbo) |
Misollar
<ul class="w3-ul w3-tiny">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-small">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-large">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-xlarge">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-xxlarge">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-xxxlarge">
O‘zingiz sinab ko‘ring »
<ul class="w3-ul w3-jumbo">
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!