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 - 2017