Tutorial – criando um site simples usando psd (Photoshop), html e css – para iniciantes – Parte 5

(Continuação)

1. Vamos começar a configurar a parte de cima (header) do site. No arquivo CSS, note que eu fiz a adição da propriedade Margin, e defini para a div #nutrição a margem de cima com 15pixels, a do lado direito com 2pixels, a de baixo com 2pixels e a do lado esquerdo com 58px. Se você salvar o documento agora pode notar que a imagem símbolo da nutrição descera um pouco e correrá um pouco para a direita da tela. Na div título eu fiz o mesmo que fiz com a div nutrição, sendo que com relação ao outro lado. Apliquei o float:right, que é pra ela colar na parte direita da tela e de lá eu controlei a margem, 75px acima, 242px na direita, 2px em baixo e 2px na esquerda. Depois de fazer tudo isto salve pressionando Ctrl+S e visualize no navegador.

2.Note na imagem abaixo que eu coloquei a propriedade pra fazer com que as imagens apontem para uma URL.

3. E na próxima fiz uma lista não ordenada (UL) para compor o nosso menu que vamos configurar posteriormente.

4. Se visualizarmos no navegador, já obtemos este resultado do menu.

5.Como o nosso menu ul que acabamos de criar está dentro da div Menu, então vamos configurá-los assim como na imagem abaixo. Display inline para fazer com que ele fique um ao lado do outro. List-style none para fazer com que os estilos (no caso, as bolinhas ) desapareçam.

Já a parte Ul li, configuramos cada item isolado. No caso, Início, Quem somos e Contato. Aplicamos float left, para aplicá-lo à esquerda, margin de 2 pixels em cima e abaixo, 8 pixels para esquerda e direita. Padding, (uma margem interna ou como muitos gostam de chamar, Enchimento) de 1 pixel para cima, 10 pixels para direita, 1 pixel para baixo e 10 pixels para a esquerda.

6. Quando visualizamos no navegador, já vemos resultado.

7. Fizemos uma alteração. Achei melhor colocar o Padding do Menu Ul Li para o Menu Ul li a, que se refere ao link, e não a lista. Observe a imagem e vá fazendo as alterações. Nessa nova regra criada, que se refere a link. Adicionei a propriedade font com o tamanho 15px, font-weight bold, para ficar negrito e uma cor para o background e outro para a fonte.

8. Visualizando no navegador, já obtemos o efeito desejado, do menu.

9. Vamos aplicar a propriedade hover, para quando o ponteiro do mouse passar, inverta as cores do menu. O menu é de fundo verde escuro e fonte laranja, na propriedade hover vai ser ao contrario, fonte verde escuro e menu laranja.

10. Observe a imagem com o efeito.

Próximo

Este post é parte integrante de um tutorial sobre como criar um site simples usando PSD, html e CSS. São 7 partes.
Acompanhe abaixo.

Parte 1 / Parte 2 / Parte 3 / Parte 4 / Parte 5 / Parte 6 / Parte 7

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *