En son web geliştirme öğreticiler
 

W3.CSS Listeler


Listesi Görüntüleme

  • x mikrofon
    Web tasarımcısı
  • x Jill
    Destek
  • x Jane
    Muhasebeci

Temel Liste

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

bordered listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

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

Örnek

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

ortalanmış listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

Renkli listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

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

Örnek

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

Belirli bir vurgulu bir renk istiyorsanız, her w3-vurgulu-sınıfların herhangi eklemek <li> elemanı:

  • Jill
  • Havva
  • Adem

Örnek

<li class="w3-hover-red">Jill</li>
Kendin dene "

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

Örnek

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

Küçük Liste

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

Büyük Liste

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

XLarge listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

XXLarge listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

XXXLarge listesi

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "

Jumbo Liste

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Kendin dene "