HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

W3.CSS Listeleri

❮ Öncesi Sonraki ❯
  • ×
    Mike
    Web Tasarımcısı
  • ×
    Jill
    Desteği
  • ×
    Jane
    Muhasebeci

Temel Liste

w3-ul sınıfı , temel bir listeyi görüntülemek için kullanılır:

  • Jill
  • Havva
  • Adem

Örnek

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

Kenarlıklı Liste

w3-border sınıfı , listenin etrafına bir kenarlık ekler:

  • Jill
  • Havva
  • Adem

Örnek

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

Liste Başlığı

Liste öğesinin içine bir başlık öğesinin nasıl ekleneceğine dair bir örnek:

  • İ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>

Kart Olarak Listele

w3-card- number sınıfları , bir listeyi kart olarak göstermek için kullanılabilir:

  • Jill
  • Havva
  • Adem

Örnek

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Ortalanmış Liste

w3-center sınıfı , bir listedeki liste öğelerini ortalamak için kullanılabilir:

  • Jill
  • Havva
  • Adem

Örnek

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

Renkli Liste

Listeye bir renk eklemek için w3- renk sınıfları kullanılabilir:

  • Jill
  • Havva
  • Adem

Örnek

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

Renkli Liste Öğesi

Liste öğesine bir renk eklemek için w3- renk sınıfları kullanılabilir:

  • Jill
  • Havva
  • Adem

Örnek

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

Gezinebilir Liste

w3-hoverable sınıfı , fareyle üzerine gelindiğinde 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>

Belirli bir vurgulu renk istiyorsanız, her <li> öğesine w3- hover- color sınıflarından herhangi birini ekleyin:

  • Jill
  • Havva
  • Adem

Örnek

<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>

Kapatılabilir Liste Öğesi

Bir liste öğesini kapatmak/gizlemek için "x" üzerine tıklayın:

  • Jill×
  • Adem×
  • Havva×

Örnek

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

İpucu: HTML × varlık, kapatma düğmeleri için tercih edilen simgedir ("X" harfi yerine).

Dolgulu Liste

w3-padding sınıfları , liste öğelerine dolgu eklemek için kullanılabilir: 

  • Jill
  • Havva
  • Adem
  • Jill
  • Havva
  • Adem

Örnek

<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>

avatar listesi

  • ×
    Mike
    Web Tasarımcısı
  • ×
    Jill
    Desteği
  • ×
    Jane
    Muhasebeci

Örnek

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <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>

İpucu: W3.CSS Çubukları ve W3.CSS Gezinme bölümlerimizde w3-bar sınıfları hakkında daha fazla bilgi edineceksiniz.

Liste Genişliği

Listeler varsayılan olarak %100 genişliğe sahiptir. Bunu değiştirmek için genişlik özelliğini kullanın.

Örnek

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

%30 genişlik:

  • Jill
  • Adem

%50 genişlik:

  • Jill
  • Adem

%80 genişlik:

  • Jill
  • Adem

Küçük Liste

Küçük bir liste görüntülemek için w3-tiny sınıfını kullanın: 

  • Jill
  • Havva
  • Adem

Örnek

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

Küçük Liste

Küçük bir liste görüntülemek için w3-small sınıfını kullanın:  

  • Jill
  • Havva
  • Adem

Örnek

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

Büyük Liste

Büyük bir liste görüntülemek için w3-large sınıfını kullanın: 

  • Jill
  • Havva
  • Adem

Örnek

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

XLarge Liste

Ekstra büyük bir liste görüntülemek   için w3-xlarge sınıfını kullanın:

  • Jill
  • Havva
  • Adem

Örnek

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

XLBüyük Liste

XXLarge listesini görüntülemek   için w3-xxlarge sınıfını kullanın:

  • Jill
  • Havva
  • Adem

Örnek

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

XXXBüyük Liste

XXXLarge listesini görüntülemek   için w3-xxxlarge sınıfını kullanın:

  • Jill
  • Havva
  • Adem

Örnek

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

Büyük Liste

Muazzam bir "jumbo" listesi görüntülemek   için w3-jumbo sınıfını kullanın:

  • Jill
  • Havva
  • Adem

Örnek

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

❮ Öncesi Sonraki ❯