Fala galera! Estamos aprendendo a montar um site em tableless.
Estilização do Menu
Continuando a editar nossa div menu, abra o estrutura.css e escreva as seguintes instruções.
#menu ul { /* vamos estilizar uma lista na div menu */
margin: 0 0 0 20px; /* margem no sentido horário(topo,direita,base,esquerda) */
padding: 0; /* sem espaçamento */
list-style-type: none; /* tipo do estilo da lista */
border-left: 1px solid #DDD; /* definimos os atributos da borda esquerda */
}
#menu li { /* vamos estilizar os elementos da lista na div menu */
display: inline; /* definimos que os elementos da lista serão exibidos numa linha */
padding: 0 10px 0 10px; /* espaçamento no sentido horário (topo,direita,base,esquerda) */
border-right: 1px solid #DDD; /* definimos os atributos da borda direita */
}
#menu li a { /* link no estado normal e visitado */
text-decoration: none; /* sem decoração no link */
color: #FFF; /* definimos a cor do link */
}
#menu li a:hover { /* link no estado quando se passa o mouse em cima */
text-decoration: underline; /* decoração sublinhado no link */
background-color: #990; /* cor de fundo no link */
}Através dessa estilização, você pode fazer coisas incríveis no menu de seu site. Vai levar em conta sua criatividade.
Na index.html adicione uma lista desordenada (ul) e adicione quantos elementos (li) você desejar. O número de elementos que você adicionar vai variar do número de links do seu menu.
No meu caso, criei 5 elementos dentro da lista:
Agora falta adicionar o link em cada elemento.
Por hoje é só. Na próxima parte vamos criar os containers restantes.
Abraços galera, Deus nos abençoe!