Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Site em Tableless - Parte 4

07 de Junho de 2008

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!

Ir para parte 5

© 2006 - 2018