quarta-feira, 9 de janeiro de 2008

Listas Personalizadas

Muitas vezes você precisa criar um sequência de tópicos em html(usando o Dreamweaver), mas não quer utilizar os marcadores do html(bolinha, círculo, quadrado).
Você gostaria de usar a vantagem de criar tópicos apartir de um enter, mas com um desenho personalizado(uma seta por exemplo).
Para fazer isto é muito fácil.

1.Peça um novo arquivo no Dreamweaver.



2.Escreva item 1

3. Com o mouse piscando apete o botão listas não ordenadas.



4. Com isso foi gerado um marcador, basta apertar o enter para novos marcadores, faça até o item 3.



5. Escolha o modo de visualização "code" ou "código".




6. No Código fonte, vá em head, após title insira o código style:

7. Digite:

li{
list-style-image: url(seta_pequena.gif);
}

Isto é um estilo para as listas



8 Agora voce precisa de uma imagem chamada no exemplo acima de seta_pequena.gif, junto com html.

9 Aperte F12 para testa e está pronto.






Paticipe da Comunidade ACR-Web & Design, poste dúvidas, comentário, compartilhe conhecimento.
http://www.orkut.com/Community.aspx?cmm=35733007

Um comentário:

Anônimo disse...

Muito Loco!!!
Parabéns