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

Elenchi W3.CSS

❮ Precedente Prossimo ❯
  • ×
    Mike
    Web Designer
  • ×
    Supporto Jill
  • ×
    Giovanna
    Ragioniere

Elenco di base

La classe w3-ul viene utilizzata per visualizzare un elenco di base:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenco bordato

La classe w3-border aggiunge un bordo all'elenco:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Intestazione elenco

Un esempio di come aggiungere un elemento di intestazione all'interno della voce di elenco:

  • Nomi

  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenca come una carta

Le classi w3-card- number possono essere utilizzate per mostrare un elenco come una carta:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenco centrato

La classe w3-center può essere utilizzata per centrare gli elementi dell'elenco in un elenco:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Lista colorata

Le classi w3- color possono essere utilizzate per aggiungere un colore all'elenco:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Voce di elenco colorata

Le classi w3- color possono essere utilizzate per aggiungere un colore alla voce dell'elenco:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenco fluttuante

La classe w3-hoverable aggiunge un colore di sfondo grigio a ciascuna voce dell'elenco al passaggio del mouse:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Se desideri un colore al passaggio del mouse specifico, aggiungi una qualsiasi delle classi w3-hover- color a ciascun elemento <li>:

  • Jill
  • vigilia
  • Adamo

Esempio

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

Voce elenco chiudibile

Fare clic sulla "x" per chiudere/nascondere una voce dell'elenco:

  • Jill×
  • Adamo×
  • vigilia×

Esempio

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

Suggerimento: l'HTML × entità è l'icona preferita per i pulsanti di chiusura (anziché la lettera "X").

Elenco con imbottitura

Le classi w3-padding possono essere utilizzate per aggiungere padding agli elementi dell'elenco: 

  • Jill
  • vigilia
  • Adamo
  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenco avatar

  • ×
    Mike
    Web Designer
  • ×
    Supporto Jill
  • ×
    Giovanna
    Ragioniere

Esempio

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

Suggerimento: imparerai di più sulle classi w3-bar nei nostri capitoli W3.CSS Bars e W3.CSS Navigation .

Larghezza elenco

Gli elenchi hanno una larghezza del 100% per impostazione predefinita. Usa la proprietà width per cambiarlo.

Esempio

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

30% di larghezza:

  • Jill
  • Adamo

50% di larghezza:

  • Jill
  • Adamo

80% di larghezza:

  • Jill
  • Adamo

Elenco minuscolo

Usa la classe w3-tiny per visualizzare un piccolo elenco: 

  • Jill
  • vigilia
  • Adamo

Esempio

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

Piccola lista

Usa la classe w3-small per visualizzare un piccolo elenco:  

  • Jill
  • vigilia
  • Adamo

Esempio

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

Elenco grande

Utilizzare la classe w3-large per visualizzare un elenco di grandi dimensioni: 

  • Jill
  • vigilia
  • Adamo

Esempio

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

XL elenco grande

Utilizzare la classe w3-xlarge per visualizzare un elenco extra large:  

  • Jill
  • vigilia
  • Adamo

Esempio

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

Lista XXLgrande

Usa la classe w3-xxlarge per visualizzare un elenco XXLarge:  

  • Jill
  • vigilia
  • Adamo

Esempio

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

XXXGrande elenco

Usa la classe w3-xxxlarge per visualizzare un elenco XXXLarge:  

  • Jill
  • vigilia
  • Adamo

Esempio

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

Lista Jumbo

Usa la classe w3-jumbo per visualizzare un enorme elenco di "jumbo":  

  • Jill
  • vigilia
  • Adamo

Esempio

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

❮ Precedente Prossimo ❯