Veja neste artigo como trabalhar com Div no html.
A tag <div> serve para alterar o estilo em partes específicas da página e posicionar objetos.
Relacionado: Guia Completo de HTML
Abaixo alguns exemplos de uso da tag <div>:
O código seria o da Listagem 1.
<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> Listagem 1. : O Uso da tag
Vamos focar na utilização da tag <div> para posicionamento de objetos:
Devemos iniciar pela tag <div> e terminar com a tag </div>, colocando todo conteúdo entre as duas.
A tag <div> deve sempre ser estilizada por um arquivo .css, mas para isso é preciso definirmos um id ou class para ele, ficando conforme a Listagem 2.
<div id=”nome_do_id”></div>Listagem 2. : Div Id
Esse tipo de div deverá ser estilizado no CSS por meio do carácter “#”. Veja a Listagem 3.
#nome_do_id{
}Listagem 3. Estilizando um id
Esta div também pode ser definida como uma classe, como mostra a Listagem 4.
<div class=”nome_da_div”></div>Listagem 4. Div Class
Sendo representada em CSS pelo “.”(ponto), como mostra a Listagem 5.
.nome_do_id{
}Listagem 5. Estilizando uma class
Veja alguns códigos de exemplo na Listagem 6.
<div style='position:absolute;margin-left:10px;margin-top:10px;width:300px;height:140px;z-index:1'> </div>
<div style='position:absolute;margin-left:50px;margin-top:20px;width:300px;height:140px;z-index:1'> </div>
<div style='position:absolute;margin-left:60px;margin-top:150px;width:300px;height:140px;z-index:1'> </div>
<div style='position:absolute;margin-left:150px;margin-top:100px;width:300px;height:140px;z-index:1'> </div>Listagem 6. Exemplos de Div
Espero que tenham gostado e até o próximo artigo.
Links Úteis
- Curso de Introdução a programação com C#:
Este curso possui o objetivo de capacitar desenvolvedores em linguagem C#. Através da exemplificação das rotinas mais básicas da linguagem e sua sintaxe. O escopo deste curso privilegia o estudo da sintaxe básica de uma aplicação C# e dos tipos envolvidos (variáveis) do escopo. - Curso de Yarn:
Neste curso aprenderemos o que é o Yarn: um gerenciador de dependências concorrente do NPM que promete ser mais rápido e eficiente que este. - Web services RESTful com Spring framework e JPA:
Neste curso você vai aprender a criar sua primeira API REST baseada nos recursos do Spring Framework. Veremos como declarar corretamente os verbos HTTP em cada recurso consumido e também como definir, de forma apropriada, o status de cada resposta fornecida pela API.
Saiba mais sobre HTML ;)
- Carreira Programador Front-end:
Foi o tempo onde ter conhecimentos em Front-end era opcional. Agora saber HTML e JavaScript virou requisito obrigatório na maioria das vagas para programadores. Com esse Guia de Carreira você sai do básico e avança no Front-end web! - O que é HTML?:
Neste curso conheceremos a HTML, a linguagem de marcação que é a base para todas as páginas dos sites que visitamos no nosso dia a dia ao navegar na web. - Como criar sua primeira página em HTML:
Neste curso aprenderemos a criar nossa primeira página web utilizando a linguagem HTML. Para isso, já empregaremos as tags semânticas do HTML5.
