Como criar uma lista não ordenada para HTML5 e CSS3 Programação

Todos os tipos de lista em HTML5 estão intimamente relacionados. O tipo mais simples e mais comum de lista é uma lista desordenada. Você também pode usar listas ordenadas e listas aninhadas em HTML.

Olhe para uma lista não ordenada

Olhe para a página simples. Além de um par de cabeçalhos, que tem uma lista de informações.

Esta lista de navegadores tem algumas características visuais interessantes:

  • Os itens são recuadas. Há algum espaço extra entre a margem esquerda e no início de cada item da lista.

  • Os elementos da lista tem balas. Aquele pequeno ponto na frente de cada item é um bala. Balas são comumente usados ​​em listas não ordenadas como este.

    image0.jpg
  • Cada item começa uma nova linha. Quando um item da lista é exibido, ele é mostrado em uma nova linha.

Essas características ajudam a ver que você tem uma lista, mas eles são comportamentos apenas padrão. Definir algo como uma lista não forçá-lo a procurar um determinado caminho- os padrões apenas ajudá-lo a ver que esses itens são de fato parte de uma lista.

Lembre-se a idéia central de HTML aqui. Você não está realmente descrevendo como as coisas Veja, mas o que eles significar. Você pode alterar a aparência mais tarde quando você descobrir o CSS, por isso não fique muito amarrado na aparência particular das coisas. Por enquanto, apenas reconhecer que HTML pode construir listas, e certifique-se que você sabe como usar os vários tipos.

Como construir uma lista não ordenada

As listas são feitos com dois tipos de etiquetas. Uma tag rodeia a lista inteira e indica o tipo geral da lista. Este primeiro exemplo demonstra uma lista não ordenada, que é cercado por o par.

Nota: Recuo todo o código dentro do conjunto é comum. A lista não ordenada pode ir no corpo principal.

Dentro do conjunto é um número de itens da lista. Cada elemento da lista é armazenada entre um (item da lista) e uma tag. Normalmente, cada par vai em sua própria linha do código-fonte, embora você pode fazer um item da lista, contanto que você quiser.

Você pode mudar a bala para todos os tipos de outras imagens, incluindo círculos, quadrados, e até mesmo imagens personalizadas.

O código para a lista desordenada é bastante simples:

basicUL.html

Listas básicas

Os navegadores da Web comuns

  • Raposa de fogo
  • cromada
  • Internet Explorer
  • Ópera
  • Safári

menu