Anzeigen einer Liste
- ×
Mike
Webdesigner - ×
Jill
Unterstützen - ×
Jane
Buchhalter
Grundliste
- Jill
- Vorabend
- Adam
Grenzt Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Listenkopf
Namen
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Liste als Karte
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " zentriert Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Farbige Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Farbige Liste Artikel
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Hoverable Liste
Die w3-hoverable Klasse fügt eine graue Hintergrundfarbe zu jeder Liste Element auf Mouse-Over:
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Wenn Sie eine bestimmte Farbe schweben möchten, fügen Sie eine der w3-Hover-Klassen zu jedem <li> -Element:
- Jill
- Vorabend
- Adam
Verschließbare Liste
Klicken Sie auf den Buchstaben "x" zu schließen / einen Listeneintrag verstecken:
- Jill x
- Adam x
- Eve x
Beispiel
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Versuch es selber " Gepolsterte Liste
- Jill
- Vorabend
- Adam
- Jill
- Vorabend
- Adam
Beispiel
<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>
Versuch es selber " Benutzerbilder
- x Mike
Webdesigner - x Jill
Unterstützen - x Jane
Buchhalter
Beispiel
<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>
Versuch es selber " Tiny Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Kleine Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Große Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " XLarge Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " XXLarge Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " XXXLarge Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber " Jumbo-Liste
- Jill
- Vorabend
- Adam
Beispiel
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Versuch es selber "