Listesi Görüntüleme
- x mikrofon
Web tasarımcısı - x Jill
Destek - x Jane
Muhasebeci
Temel Liste
- Jill
- Havva
- Adem
bordered listesi
- Jill
- Havva
- Adem
Liste Başlığı
İsimler
- Jill
- Havva
- Adem
Örnek
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Kendin dene " Bir Kart olarak Listesi
- Jill
- Havva
- Adem
ortalanmış listesi
- Jill
- Havva
- Adem
Renkli listesi
- Jill
- Havva
- Adem
Renkli Liste Öğesi
- Jill
- Havva
- Adem
Örnek
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Kendin dene " Hoverable liste
W3-hoverable sınıf Fare ile üzerine her liste öğesine gri bir arka plan rengi ekler:
- Jill
- Havva
- Adem
Belirli bir vurgulu bir renk istiyorsanız, her w3-vurgulu-sınıfların herhangi eklemek <li> elemanı:
- Jill
- Havva
- Adem
kapatılabilir liste
Mektup tıklayın "x" / Bir liste öğesini gizlemek kapatmak için:
- Jill x
- Adam x
- Eve x
Örnek
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Kendin dene " Yastıklı Liste
- Jill
- Havva
- Adem
- Jill
- Havva
- Adem
Örnek
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
Kendin dene " Avatar listesi
- x mikrofon
Web tasarımcısı - x Jill
Destek - x Jane
Muhasebeci
Örnek
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
Kendin dene " Minik Liste
- Jill
- Havva
- Adem
Küçük Liste
- Jill
- Havva
- Adem
Büyük Liste
- Jill
- Havva
- Adem
XLarge listesi
- Jill
- Havva
- Adem
XXLarge listesi
- Jill
- Havva
- Adem
XXXLarge listesi
- Jill
- Havva
- Adem
Jumbo Liste
- Jill
- Havva
- Adem