Visualización de una lista
- ×
Micro
Diseñador web - ×
Jill
Apoyo - ×
Jane
Contador
Lista básica
- Jill
- Víspera
- Adán
Lista bordeado
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " cabecera de la lista
nombres
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista como una tarjeta
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista centrada
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista de color
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista de artículos de color
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " lista Hoverable
La clase W3-hoverable añade un color de fondo gris a cada elemento de la lista en el ratón por encima:
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Si desea un color específico vuelo estacionario, añadir cualquiera de los W3-asomar-clases para cada elemento <li>:
- Jill
- Víspera
- Adán
lista que se puede cerrar
Haga clic en la letra "x" para cerrar / ocultar un elemento de la lista:
- Jill x
- Adam x
- Eva x
Ejemplo
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Inténtalo tú mismo " Lista acolchada
- Jill
- Víspera
- Adán
- Jill
- Víspera
- Adán
Ejemplo
<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>
Inténtalo tú mismo " Lista de Avatar
- x Micro
Diseñador web - x Jill
Apoyo - x Jane
Contador
Ejemplo
<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>
Inténtalo tú mismo " Lista pequeña
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista pequeña
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista grande
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista XLarge
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista XXGrande
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista XXXLarge
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo " Lista Jumbo
- Jill
- Víspera
- Adán
Ejemplo
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Inténtalo tú mismo "