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.

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.