Carregar apresentação
A apresentação está carregando. Por favor, espere
PublicouDanilo Melgaço Barateiro Alterado mais de 8 anos atrás
1
Posicionamento Prof. Wolley
2
Centralizando conteúdo Abrir o arquivo responsabilidade_social.html
3
Centralizando conteúdo 1.Cria um div para conteudo 2.Usar as propriedade CSS da div como Box Model
4
Centralizando conteúdo
5
Posicionamento da Imagem Posicionamento Relativo – A declaração positon: relative, quando usada em conjunto com as propriedades top, right, bottom e left, movimenta, o bloco de sua posição inicial. – O bloco é deslocado, mas o espaço que ele ocupava é preservado.
6
Posicionamento da Imagem position:relative O espaço é mantido
7
Posicionamento da Imagem Posicionamento Absoluto – position: absolute, retira o box do seu posicionamento na marcação e faz com que o box seguinte na marcação HTML se desloque para a posição que ele ocupava. – Emprega as mesma propriedades top, right, bottom, left.
8
Posicionamento da Imagem position: absolute
9
Posicionamento da Imagem Flutuando elementos – No esquema float de posicionamento, o box é retirado de sua posição no fluxo do documento e flutuado para a direta ou esquerda. – O espaço deixado será preenchido pelo próximo elemento do documento html. – Propriedades: left e right.
10
Posicionamento da Imagem Flutuando elementos
11
Posicionamento da Imagem Posicionamento Fixo – A declaração position: fixed, define o box fixo em relação à pagina e não se movimenta quando há uma rolagem.
12
Posicionamento de box para Layout Vamos criar o layout abaixo, lembre-se, não iremos usar tabelas, vamos usar a tag DIV e formatação CSS.
13
Posicionamento de box para Layout DIVs para marcação da áreas do site Link para o arquivo.css
14
Posicionamento de box para Layout Arquivo Layout.css
15
Exercício Utilizando as tags DIV e formatação CSS, crie o layout abaixo:
16
Menu de Navegação Utilizaremos uma lista não ordenada para criar um menu de navegação Abrir arquivo menu_navegacao.html
17
Menu de Navegação Lista não ordenada sem estilização.
18
Menu de Navegação Centraliza a div Define largura e altura da div Cor e tipo da borda Alinhamento do texto dentro da div
19
Menu de Navegação Retina o marcador de lista Define as margem da lista com relação a div Define a largura e altura de cada elemento da lista Flutua os elementos da lista para a esquerda Define a margem de um elemento para o outro Define o padding dos elementos com sua margem Define a cor de fundo
20
Menu de Navegação Retira o sublinhado os elementos da lista
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.