Criando Layouts Com HTML e CSS

O documento explica como criar layouts em HTML e CSS usando grids. Apresenta um exemplo simples com um arquivo HTML que referencia um arquivo CSS externo. O arquivo CSS define o estilo do corpo e página em 100% de altura e largura e em seguida cria um layout de grade com 2 colunas e 3 linhas, mapeando cada seção da página em uma área da grade.

Enviado por

Victor Barbosa

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

100% acharam este documento útil (1 voto)

108 visualizações

Criando Layouts Com HTML e CSS

Enviado por

Victor Barbosa

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 2

Criando layouts com HTML e CSS, seque um exemplo de código simples para

aprender o básico sobre layouts em CSS. Abaixo está o arquivo .html que consta sua
estrutura do site, note que para aplicar o layout na página você precisa referenciar a
classe em cada Tag (tag class = “nome da classe do arquivo .css”) além de colocar o
<link> para o arquivo css que vai dentro de <head>. Que vai ser criado.

1.Arqruivo1 (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questão 2</title>
<link rel="stylesheet" href="grid2.css">
</head>

<body class="grid-container">
<header class = "header"> Topo </header>
<aside class="navbar"> Menu </aside>
<article class="main"> Conteúdo </article>
<footer class="footer"> Rodapé </footer>
</body>
</html>

Abaixo está o arquivo css que estrutura o Layout, usando grid (existem outras formas de criar
Layouts que não usando grids), no item 1 temos a definição do estilo do body e da página html,
definimos altura e largura para 100% para posteriormente usarmos de base para definir os
tamanhos de cada parte do layout como você pode notar no final desse arquivo ( .grid-container{
), em seguida podemos pular para o final do arquivo onde temos ( .grid-container{ )
Na primeira linha temos ( display: grid; ) que define o estilo do layout para grid (grade), depois
temos a definição de quantas colunas e quantas linhas teremos no grid, para adicionar colunas e
linhas basta adicionar o tamanho logo após suas declarações, no caso, o tamanho de cada linha
e cada coluna está definido por %, note que temos 2 colunas e 3 linhas, em seguida, temos ( grid-
template-areas: ) que define qual a ordem do filho, suas disposições, note que, já que temos duas
colunas, uma tomando conta de 25% da área e outra 75%, isso no documento todo, e queremos
que um filho tome conta de todo o espaço, precisamos colocar ele duas vezes, preenchendo as
duas colunas e se tornando visualmente um só no layout, já quando queremos duas colunas
distintas inserimos o nome do filho ao lado do outro que vai dividir o espaço dentro das aspas,
como em “main navbar”. Você pode abrir o arquivo .html e verificar o layout.
2.Arquivo 2 (grid2.css)
@charset "UTF-8";

Item 1.
body, html{
height: 100%;
width: 100%;
color: white;
}

.grid-container > * {
text-align: center;
}

.header {
grid-area: header;
background-color: rgb(31, 43, 43);

.navbar {
grid-area: navbar;
background-color: rgb(63, 131, 63);
position: relative;

.main {
grid-area: main;
background-color: rgb(192, 186, 186);
}

.footer {
grid-area: footer;
background-color: rgb(75, 72, 72);
}

.grid-container {
display: grid;
grid-template-columns: 25% 75%;
grid-template-rows: 35% 60% 5%;
grid-template-areas:
"header header"
"main navbar"
"footer footer";
}