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.Listy CSS

❮ Poprzedni Następny ❯
  • ×
    Mike
    Web Designer
  • ×
    Wsparcie Jill
  • ×
    Jane
    Księgowa

Lista podstawowa

Klasa w3-ul służy do wyświetlania podstawowej listy:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Lista obramowana

Klasa w3-border dodaje obramowanie wokół listy:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Nagłówek listy

Przykład, jak dodać element nagłówka wewnątrz elementu listy:

  • Nazwy

  • Jill
  • przeddzień
  • Adam

Przykład

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

Lista jako karta

Klasy numerów kart w3- mogą być użyte do wyświetlenia listy jako karty:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Lista wyśrodkowana

Klasy w3-center można użyć do wyśrodkowania elementów listy na liście:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Kolorowa lista

Klasy kolorów w3 mogą być użyte do dodania koloru do listy:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Kolorowa pozycja listy

Klasy kolorów w3- mogą być użyte do dodania koloru do elementu listy:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Unosząca się lista

Klasa w3-hoverable dodaje szary kolor tła do każdego elementu listy po najechaniu myszą:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Jeśli chcesz mieć określony kolor najechania kursorem, dodaj dowolną z klas w3-hover- color do każdego elementu <li>:

  • Jill
  • przeddzień
  • Adam

Przykład

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

Zamykana pozycja listy

Kliknij „x”, aby zamknąć/ukryć element listy:

  • Jill ×
  • Adam ×
  • przeddzień ×

Przykład

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

Wskazówka: HTML × encja jest preferowaną ikoną przycisków zamykania (zamiast litery „X”).

Lista z dopełnieniem

Klasy w3 padding mogą służyć do dodawania dopełnienia do elementów listy: 

  • Jill
  • przeddzień
  • Adam
  • Jill
  • przeddzień
  • Adam

Przykład

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

Lista awatarów

  • ×
    Mike
    Web Designer
  • ×
    Wsparcie Jill
  • ×
    Jane
    Księgowa

Przykład

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

Wskazówka: Więcej informacji o klasach w3-bar znajdziesz w rozdziałach W3.CSS Bars i W3.CSS Navigation .

Szerokość listy

Listy mają domyślnie szerokość 100%. Użyj właściwości width, aby to zmienić.

Przykład

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

30% szerokości:

  • Jill
  • Adam

50% szerokości:

  • Jill
  • Adam

80% szerokości:

  • Jill
  • Adam

Mała lista

Użyj klasy w3-tiny , aby wyświetlić małą listę: 

  • Jill
  • przeddzień
  • Adam

Przykład

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

Mała lista

Użyj klasy w3-small , aby wyświetlić małą listę:  

  • Jill
  • przeddzień
  • Adam

Przykład

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

Duża lista

Użyj klasy w3-large , aby wyświetlić dużą listę: 

  • Jill
  • przeddzień
  • Adam

Przykład

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

XLDuża lista

Użyj klasy w3-xlarge , aby wyświetlić bardzo dużą listę:  

  • Jill
  • przeddzień
  • Adam

Przykład

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

XXDuża lista

Użyj klasy w3-xxlarge , aby wyświetlić listę XXLarge:  

  • Jill
  • przeddzień
  • Adam

Przykład

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

XXXDuża lista

Użyj klasy w3-xxxlarge , aby wyświetlić listę XXXLarge:  

  • Jill
  • przeddzień
  • Adam

Przykład

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

Lista Jumbo

Użyj klasy w3-jumbo , aby wyświetlić ogromną listę „jumbo”:  

  • Jill
  • przeddzień
  • Adam

Przykład

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

❮ Poprzedni Następny ❯