Exercício de Programação #15 - CSS - Posicionamento de Divs
11/09/2023A ideia deste exercício é posicionar quatro divs nos extremos de uma página html. O foco é treinar a habilidade do posicionamento de divs em um sistema.
Exercício - CSS - Posicionamento de Divs
Em HTML, uma <div> é um elemento de bloco que é frequentemente usado como um contêiner genérico para agrupar e estruturar outros elementos HTML. A posição de uma <div> na página é determinada principalmente pelo CSS (Cascading Style Sheets).
Lembre-se de que o posicionamento de divs depende muito do layout desejado e dos requisitos específicos do seu projeto. Experimentar e combinar essas propriedades e técnicas é muitas vezes necessário para alcançar o resultado desejado. Além disso, é importante considerar a responsividade e a acessibilidade ao projetar o posicionamento de elementos em uma página web.
No exemplo da aula de hoje criaremos dois arquivos, o index.html e o style.css.
index.html
O index será nosso arquivo de marcação, onde colocaremos as tags divs e suas respectivas classes de estilização:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<div class="content-items">Elemento 1</div>
<div class="content-items">Elemento 2</div>
<div class="content-items">Elemento 3</div>
<div class="content-items">Elemento 4</div>
</div>
</body>
</html>style.css
No arquivo style.css faremos a estilização das divs, sendo uma div pai chamada content e as divs filhas chamadas content-items:
*{margin:0; padding:0; box-sizing: border-box;}
.content{
position: relative;
width: 100%;
height: 100vh;
}
.content-items{
position: absolute;
width: 150px;
height: 150px;
background: red;
}
.content div:nth-child(2){
background: gray;
right: 0;
}
.content div:nth-child(3){
background: green;
bottom:0;
}
.content div:nth-child(4){
background: yellow;
right: 0;
bottom:0;
}Então é isso, por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!
Precisa de ajuda com os códigos? Suporte Premium: webdesignemfoco@gmail.com
"Os justos clamam, o Senhor os ouve e os livra de todas as suas tribulações. O Senhor está perto dos que têm o coração quebrantado e salva os de espírito abatido." Salmos 34:17-18
Posts Relacionados
