Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS wykazy

❮ Poprzedni Następny Rozdział ❯

Wyświetlanie listy

  • × Mikrofon
    Projektant stron internetowych
  • × Jill
    Wsparcie
  • × Jane
    Księgowa

Lista podstawowa

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

graniczy Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Lista Header

  • 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>
Spróbuj sam "

Lista jak karta

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Lista centered

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Barwne Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Barwne Wykaz egzemplarzy

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Hoverable lista

Klasa w3-hoverable dodaje szary kolor tła dla każdego elementu listy na myszy-Over:

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Jeśli chcesz określonego koloru aktywowania, dodać jeden z W3-hover klas dla każdego elementu <li>:

  • Jill
  • Przeddzień
  • Adam

Przykład

<li class="w3-hover-red">Jill</li>
Spróbuj sam "

zamykany lista

Kliknij na literę "X", aby zamknąć / ukryć element listy:

  • Jill x
  • Adam x
  • Ewa x

Przykład

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Spróbuj sam "

Lista usztywniany

  • Jill
  • Przeddzień
  • Adam
  • Jill
  • Przeddzień
  • Adam

Przykład

<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>
Spróbuj sam "

Lista Avatar

  • x Mikrofon
    Projektant stron internetowych
  • x Jill
    Wsparcie
  • x Jane
    Księgowa

Przykład

<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>
Spróbuj sam "

Tiny Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

małe Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Duża lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

XLarge Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Lista XXLarge

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

XXXLarge Lista

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

Lista Jumbo

  • Jill
  • Przeddzień
  • Adam

Przykład

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Spróbuj sam "

❮ Poprzedni Następny Rozdział ❯