Oi galera hipermasters! Hoje iremos fazer um menu simples parecido com um desses que tem em alguns portais como o portal do uol por exemplo com CSS.
Enquanto eu vou elaborando o menu vou explicando o que estou fazendo ok?
Bom, vamos começar construindo os links do menu, os links serão: hipermasters, vrmsurf e e-mail.
O código ficaria assim:
<a href="http://www.hipermasters.com">Hipermasters</a><br>
<a href="http://vrmsurf.psicomasters.com">Vrmsurf</a><br>
<a href="mailto:[email protected]">e-mail</a><br>
Agora iremos atribuir uma ID para os links. ( Se você não sabe o que é um ID leia as colunas anteriores ).
O código do menu vai ficar assim:
<a id="menu" href="http://www.hipermasters.com">Hipermasters</a><br>
<a id="menu" href="http://vrmsurf.psicomasters.com">Vrmsurf</a><br>
<a id="menu" href="mailto:[email protected]">e-mail</a><br>
Mas você deve estar pensando: mas esse menu está muito feio, vai ficar assim mesmo?
Sim, o código html já está prontíssimo, agora vamos ao que interessa, as CSS.
<style type="text/css">
#menu { /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #43A9FF; /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: none; /* Aqui definimos a decoração do texto*/
}
#menu:hover { /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px; /* Aqui definimos o tamanho da fonte*/
color: white; /* Aqui definimos a cor da fonte*/
background-color: #1E77C3; /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF; /* Aqui definimos a borda*/
text-decoration: underline; /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
Prontinho, artigo simples não?
Na próxima coluna iremos aprender sobre fundos com CSS, aguardem.
Aqui vão algumas dicas do tio <VrMsUrF>:
1 - Quem tiver algum comentário, duvida ou sugestão não se acanhe, envie um e-mail para mim: [email protected]
2 - Não me adicionem no msn para me pedir para ensinar algo a vocês, sempre que eu posso ensinar algo eu escrevo as colunas aqui na hipermasters. Utilizem o fórum da hiper ou algum dos muitos foruns que existem por ai.
3 - Pesquisem sobre tableless, vai ajudar muito na vida de vocês, uma boa noção de tableless ajuda muito um webdesigner.
fonte: www.hipermasters.com
