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

Seznamy W3.CSS

❮ Předchozí Další ❯
  • ×
    Mike
    Web Designer
  • ×
    Podpora Jill
  • ×
    Jane
    účetní

Základní seznam

Třída w3-ul se používá k zobrazení základního seznamu:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Ohraničený seznam

Třída w3-border přidá ohraničení kolem seznamu:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Záhlaví seznamu

Příklad, jak přidat prvek nadpisu do položky seznamu:

  • Jména

  • Jill
  • Předvečer
  • Adame

Příklad

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

Seznam jako karta

Třídy w3- card- number lze použít k zobrazení seznamu jako karty:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Vycentrovaný seznam

Třídu w3-center lze použít k vystředění položek seznamu v seznamu:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Barevný seznam

Třídy barev w3- lze použít k přidání barvy do seznamu:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Položka barevného seznamu

Třídy barev w3- lze použít k přidání barvy do položky seznamu:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Vznášet se seznam

Třída w3-hoverable přidá šedou barvu pozadí ke každé položce seznamu při přejetí myší:

  • Jill
  • Předvečer
  • Adame

Příklad

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

Pokud chcete konkrétní barvu přechodu, přidejte do každého prvku <li> kteroukoli z tříd w3-hover- color :

  • Jill
  • Předvečer
  • Adame

Příklad

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

Položka uzavíratelného seznamu

Kliknutím na „x“ zavřete/skryjete položku seznamu:

  • Jill ×
  • Adame ×
  • Předvečer ×

Příklad

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

Tip: HTML × entita je preferovaná ikona pro tlačítka zavřít (spíše než písmeno "X").

Seznam s odsazením

Třídy w3-padding lze použít k přidání odsazení do položek seznamu: 

  • Jill
  • Předvečer
  • Adame
  • Jill
  • Předvečer
  • Adame

Příklad

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

Seznam avatarů

  • ×
    Mike
    Web Designer
  • ×
    Podpora Jill
  • ×
    Jane
    účetní

Příklad

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

Tip: Více o třídách w3-bar se dozvíte v našich kapitolách W3.CSS Bars a W3.CSS Navigation .

Šířka seznamu

Seznamy mají ve výchozím nastavení šířku 100 %. Chcete-li to změnit, použijte vlastnost width.

Příklad

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

30% šířka:

  • Jill
  • Adame

50% šířka:

  • Jill
  • Adame

80% šířka:

  • Jill
  • Adame

Malý seznam

Pomocí třídy w3-tiny zobrazíte malý seznam: 

  • Jill
  • Předvečer
  • Adame

Příklad

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

Malý seznam

Pomocí třídy w3-small zobrazíte malý seznam:  

  • Jill
  • Předvečer
  • Adame

Příklad

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

Velký seznam

Použijte třídu w3-large k zobrazení velkého seznamu: 

  • Jill
  • Předvečer
  • Adame

Příklad

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

Seznam XLarge

Použijte třídu w3-xlarge k zobrazení extra velkého seznamu:  

  • Jill
  • Předvečer
  • Adame

Příklad

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

Seznam XXLarge

Pomocí třídy w3-xxlarge zobrazíte seznam XXLarge:  

  • Jill
  • Předvečer
  • Adame

Příklad

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

XXXVelký seznam

K zobrazení seznamu XXXLarge použijte třídu w3-xxxlarge :  

  • Jill
  • Předvečer
  • Adame

Příklad

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

Jumbo seznam

Použijte třídu w3-jumbo k zobrazení obrovského „jumbo“ seznamu:  

  • Jill
  • Předvečer
  • Adame

Příklad

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

❮ Předchozí Další ❯