Olá pessoal, tudo certo?
Bom, no post passado colocamos um topo no nosso site, reparem que nele tem um menu certo? Hoje vamos montar esse menu para poder completar o topo do site.
Abaixo da div topo vamos inserir nosso menu:
<html> <head> <title>Exemplo 01</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="topo"> <img src="imagens/logomarca.jpg"> </div> <div id="menu"> <!-- vamos colocar nosso menu aqui --> </div> <h1>O meu nome é?</h1> <p>Rafael Fagundes</p> <h1>Qual módulo estou estudando?</h1> <p>HTML e CSS</p> </body> </html>
Então para montar as opções do menu, vamos usar uma lista.
Obs:
<ul> é a nossa lista
<li> são as opções que tem dentro da lista
Vamos a lista:
<ul> <li>Opção 1</li> <li>Opção 2</li> <li>Opção 3</li> <li>Opção 4</li> <li>Opção 5</li> </ul>
Montado nossa lista, vamos salvar a index.html.
No css, temos que definir como esse menu será apresentado o menu no navegador.
/* Definimos o div onde vai aparecer o menu */
#menu{
height:30px;
background:#ddd;
line-height:30px;
}
/* aqui definimos como cada li deve se comportar */
#menu ul li{
float:left;
list-style:none;
padding:0 20px;
border-right:1px solid #999;
}
Salve o estilo.css.
Pronto, nosso menu agora já esta com uma formatação legal.
Veja como deve ficar o exemplo. Clique aqui.
Qualquer dúvida ou sugestão, manda um email para rafael2802@gmail.com.
Abraço pessoal.