Como usar imagens em listas para html5 e css3 programação

Não é bem um fundo, mas você também pode usar imagens para itens de lista para a sua página web HTML5 e CSS3. Às vezes, você pode querer algum tipo de bala especial para as suas listas.

Nesta página, diversas variedades de pimentas foram listados. Para este tipo de lista, uma bala pimenta costume é apenas a coisa. Claro, CSS é a resposta:

listImages.html

Meus Pimentas favoritos

  • Verde
  • habenero
  • Arrivivi Gusano

o list-style-image atributo permite anexar uma imagem a um item da lista. Para criar balas personalizadas:

  1. Comece uma imagem personalizada com.

    imagens de bala deve ser pequeno, para que você pode ter que fazer alguma coisa pouca. A imagem será cortado para uma largura apropriada, mas ele vai ter toda a altura da imagem original, assim torná-lo pequeno.



  2. Especifique o list-style-image com um url atributo.

    Você pode definir a imagem como list-style-image, e todas as balas serão substituídos com essa imagem.

  3. Teste a lista no seu browser.

    Certifique-se de que tudo está funcionando corretamente. Verifique se o navegador pode encontrar a imagem, que o tamanho é certo, e que tudo parece que você espera.

Se você não quiser usar uma imagem, CSS tem uma série de outros estilos que você pode aplicar a sua lista itens. Use o list-style-type governar para definir a sua lista para um dos muitos estilos. Olhe para documentação CSS oficial para uma lista completa, mas os tipos de estilo mais comumente utilizados são disco, círculo, quadrado, decimal, superior romano, inferior-romana, superior Latina, e inferior Latina.

Note que você pode aplicar um estilo numérico para um item da lista em uma lista ordenada ou não ordenada, de modo a distinção entre esses tipos de lista é menos importante do que costumava ser.


Publicações relacionadas