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
Hidden Content
Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)
Regras do Fórum