Note: Chào mừng bạn đến với Cntt-k3.com. Hãy Đăng ký thành viên hoặc Đăng nhập để có thể tham gia cùng Cntt-k3 nhá !

Você não está conectado. Conecte-se ou registre-se

Trabalhando com Div em HTML

Ir para baixo  Mensagem [Página 1 de 1]

1Trabalhando com Div em HTML Empty Trabalhando com Div em HTML Ter Nov 25, 2014 12:53 pm

Wh0s

Wh0s
Administrador

Veja neste artigo como trabalhar com Div no html.
A tag
serve para alterar o estilo em partes específicas da página e posionar objetos.
Abaixo alguns exemplos de uso da tag
:
O código seria esse:
Listagem 1 : O Uso da tag


Código:
<html>
<head>
<title>Divs</title>
</head>
 
<body>
<div style="background-color:#00BFFF;text-align:center">
<p>Primeira Div</p>
</div>
<div style="border:3px dotted #9F0">
<p>Segunda Div</p>
</div>
 
</body>
</html>
Vamos focar na utilização da tag
para posicionamento de objetos:
Devemos iniciar pela tag
e terminar com a tag
, colocando todo conteúdo entre as duas.

A tag
deve sempre ser estilizada por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele, ficando:
Listagem 2 : Div Id
1
Código:
<div id=”nome_do_id”></div>
Esse tipo de div deverá ser estilizado no css por meio do caracter “#”.
Listagem 3: Estilizando um id
1
2
Código:
#nome_do_id{
Código:
}
Esta div também pode ser definida como uma classe
Listagem 4: Div Class
1
Código:
<div class=”nome_da_div”></div>
Sendo representada em css pelo “.”(ponto).
Listagem 5: Estilizando uma class
1
2
Código:
.nome_do_id{
Código:
}
Veja alguns códigos de exemplos.
Listagem 6: Exemplos de Div
1
2
3
4
Código:
<div style=
Código:
'position:absolute;margin-left:10px;margin-top:10px;width:300px;height:140px;z-index:1'
Código:
> </div>
Código:
<div style=
Código:
'position:absolute;margin-left:50px;margin-top:20px;width:300px;height:140px;z-index:1'
Código:
> </div>
Código:
<div style=
Código:
'position:absolute;margin-left:60px;margin-top:150px;width:300px;height:140px;z-index:1'
Código:
> </div>
Código:
<div style=
Código:
'position:absolute;margin-left:150px;margin-top:100px;width:300px;height:140px;z-index:1'
Código:
> </div>

https://webtech.forumeiro.com

Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos