TUTORIAL CRIANDO MENU HORIZONTAL EM LISTA

Devido a falta de conhecimento dos usuarios da RZBR iniciantes em CSS , decidi fazer esse tutorial de como criar um menu em lista.

#PS: VOCE PODE LER E APRENDER ,OU COPIAR E NAO ENTENDER!



Oque é lista:

Lista é uma lista ordenada que o dreamweaver cria para variados finais.

Vamos lá!

Hum , o bom desse tutorial , é que eu vou encinar ao mesmo tempo como resetar a folha de CSS , simples :

no topo da folha :

*{margin:0; padding:0;}


O margin é o posisionamento e o padding é as bordas . Alguns Browsers já tem margin e padding pré-feitos , e com esse codigo no css , você reseta a folha.

Como criar o menu:

Simples , crie uma lista:
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
As <ul> são as aberturas das listas, e <li> são as iniciativa dos "paragrafos".
E como todos devem saber , eu coloquei id , que é como o estilo do UL , ou seja, da lista.

Pronto , temos a lista , agora vamos ao CSS.

ul{
list-style-type:none;
}
Isso significa , que não terá aquelas bolinhas redondas que fazem nas listas.

ul#menu{

width:600px;
margin:0 auto;
}
Width é a largura e o margin 0 auto , é para centralizar , ao enves de usar <center>

ul#menu li{
position:relative;
float:left;
}
Assim , especifica alista. O float ,é para colocar o menu na horizontal. A posição relativa ,é para obedecer ao float.

ul#menu li a{
display:block; - bloqueia o movimento caso clique e empurre
float:left;
padding:0 15px; - espaço como já mostrei em outro tuto
height:30px; - tamanho
line-height:25px; - tamanho de linha , se voce tira vai perceber oque é.
background:#090;
color:#FFF;
text-decoration:none;
}
PODE -SE USAR BORDER LEFT OU RIGHT COM UMA COR MAIS ESCURA QUE O MENU .. DA UM RESULTADO BEM LEGAL.

Finalmente a parte do link no menu.
a parte do " li a " quer dizer que o link na lista será daquele modo, o link. Pode fazer ali dentro do seu jeito.
Como pode ver o background esta de uma cor, no hover se modifica.

ul#menu li a:hover{
background:#096;
}
E finalmente , o hover , é quando se passa o mouse em cima.

Apenas mudará a cor com o background.



É ISSO GENTE ,SE LERAM APRENDERAM , SE NAO LERAM COPIARAM , SE COPIARAM , NAO ENTENDERAM E CONTINUARAM SEM FAZER SUCESSO COM SUAS WEBS UAAUHAHU

Resultado:

[Somente usuários registrados podem vem os links. ]

Atualizado com foto.

Tutorial feito por: Nerdzinhu
CSS
: Nerdzinhu