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

Listas W3.CSS

❮ Anterior Próximo ❯
  • ×
    Mike
    Web Designer
  • ×
    Suporte Jill
  • ×
    Jane
    Contadora

Lista Básica

A classe w3-ul é usada para exibir uma lista básica:

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista limitada

A classe w3-border adiciona uma borda ao redor da lista:

  • Jill
  • véspera
  • Adão

Exemplo

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

Cabeçalho da lista

Um exemplo de como adicionar um elemento de título dentro do item da lista:

  • Nomes

  • Jill
  • véspera
  • Adão

Exemplo

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

Listar como um cartão

As classes w3-card- number podem ser usadas para mostrar uma lista como um cartão:

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista centralizada

A classe w3-center pode ser usada para centralizar os itens da lista em uma lista:

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista colorida

As classes w3- color podem ser usadas para adicionar uma cor à lista:

  • Jill
  • véspera
  • Adão

Exemplo

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

Item de lista colorida

As classes w3- color podem ser usadas para adicionar uma cor ao item da lista:

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista suspensa

A classe w3-hoverable adiciona uma cor de fundo cinza a cada item da lista ao passar o mouse:

  • Jill
  • véspera
  • Adão

Exemplo

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

Se você quiser uma cor de foco específica, adicione qualquer uma das classes w3-hover- color a cada elemento <li>:

  • Jill
  • véspera
  • Adão

Exemplo

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

Item de lista que pode ser fechado

Clique no "x" para fechar/ocultar um item da lista:

  • Jill ×
  • Adão ×
  • véspera ×

Exemplo

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

Dica: O HTML × entidade é o ícone preferido para botões de fechamento (em vez da letra "X").

Lista com preenchimento

As classes de preenchimento w3 podem ser usadas para adicionar preenchimento aos itens da lista: 

  • Jill
  • véspera
  • Adão
  • Jill
  • véspera
  • Adão

Exemplo

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

  • ×
    Mike
    Web Designer
  • ×
    Suporte Jill
  • ×
    Jane
    Contadora

Exemplo

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

Dica: Você aprenderá mais sobre as classes w3-bar em nossos capítulos W3.CSS Bars e W3.CSS Navigation .

Largura da lista

As listas têm uma largura de 100% por padrão. Use a propriedade largura para alterar isso.

Exemplo

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

30% largura:

  • Jill
  • Adão

50% largura:

  • Jill
  • Adão

80% largura:

  • Jill
  • Adão

Pequena lista

Use a classe w3-tiny para exibir uma pequena lista: 

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista pequena

Use a classe w3-small para exibir uma pequena lista:  

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista Grande

Use a classe w3-large para exibir uma lista grande: 

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista grande

Use a classe w3-xlarge para exibir uma lista extra grande:  

  • Jill
  • véspera
  • Adão

Exemplo

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

XXLista Grande

Use a classe w3-xxlarge para exibir uma lista XXLarge:  

  • Jill
  • véspera
  • Adão

Exemplo

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

XXXLista Grande

Use a classe w3-xxxlarge para exibir uma lista XXXLarge:  

  • Jill
  • véspera
  • Adão

Exemplo

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

Lista Jumbo

Use a classe w3-jumbo para exibir uma enorme lista "jumbo":  

  • Jill
  • véspera
  • Adão

Exemplo

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

❮ Anterior Próximo ❯