13 de abril de 2008

Personalizando listas com CSS

Você gostaria de criar listas personalizadas, com uma imagem diferente para cada item? Aqui está a solução:

CSS

ul li {
font-size: 11px;
padding-left: 17px;
margin-left: 2px;
margin-bottom: 5px;
list-style:none;
}

.mac {
background: url(imagens/mac.gif) bottom left no-repeat;
}
.flickr {
background: url(imagens/flickr.gif) bottom left no-repeat
}

HTML

<ul>
<li class="mac">Mac</li>
<li class="flickr">Flickr</li>
</ul>


Você pode adicionar quantos itens quiser, lembrando apenas de colocar o atributo class em cada item.

Veja em ação.

Tags:

0 comentários: