Olá pessoal, vamos continuar com o nosso layout em css que estamos montando. Logo estarei postando um review do meu novo celular (Motorola Dext) vai ser bem legal, to gostando do aparelho.
Bom, vamos então criar um topo para o nosso layout que começamos no post passado.
No nosso arquivo índex.html, vamos criar um topo para deixar mais apresentável o conteúdo do nosso site.
Vamos adicionar então um div para fazer o nosso topo. O id do topo vai ser chamar “topo”, como no exemplo.
<html> <head> <title>Exemplo 01</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="topo"></div> <h1>O meu nome é?</h1> <p>Rafael Fagundes</p> <h1>Qual módulo estou estudando?</h1> <p>HTML e CSS</p> </body> </html>
Salve o arquivo índex.html.
Vamos agora ao nosso css para definir como o topo deve se comportar. Abra o arquivo estilo.css
Como definimos “id=topo” devemos usar # para que o elemento possa adquirir o estilo.
Adicionamos o seguinte código.
#topo{
height:70px; /* ALTURA DO TOPO */
background:#690; /* FUNDO DO TOPO */
}
Salve o arquivo estilo.css.
Repare que existe uma pequena margem em volta de todo nosso site. Vamos retirar ela para que o mesmo fique junto à margem do navegador.
Vamos adicionar em nosso css a propriedade magin e padding:
*{
font-family: arial; /*Definir a fonte padrão*/
font-size:12px; /*Definir o tamanha da fonte padrão*/
margin:0; /* Margem externa de qualquer elemento dentro do html */
padding:0; /* Margem interna de qualquer elemento dentro do html */
}
Salve o estilo.css.
Agora vamos adicionar uma logomarca em nosso topo, vamos pegar uma imagem qualquer, caso ela tenha fundo decor diferentes, é ideal usar ela em formato png transparente.
No meu caso vou adicionar uma imagem como se fosse uma logomarca.
Voltando ao arquivo índex.html, dentro do div onde esta definido o topo, vamos adicionar a tag da nossa imagem.
Então em nossa pasta onde estamos salvando nosso site, vamos criar uma pasta chamada “imagens”, dentro dela vamos salvar nossa logomarca.
Salvei uma imagem jpg com o nome de logomarca.jpg.
Vamos então chamar nossa imagem:
<div id="topo"> <img src="imagens/logomarca.jpg"> </div>
Como definimos que todo elemento ai ficar sem margem, a logomarca ficou colada com o navegador, vamos ajustar para que ela fique em um posição legal dentro do topo.
No nosso arquivo css vamos adicionar:
#topo img{
margin:5px
}
Agora estamos trabalhando com um elemento dentro do outro.
Então dentro do elemento #topo, estamos definindo que o elemento img(padrão de imagem) vai receber uma margem.
Salve seu css.
Veja o exemplo aqui de como deve ficar o nosso topo.
Agora temos um topo com a imagem na posição certa, vamos partir agora para um menu dentro do nosso site no próximo post.