Layout do Site do CSS

Layout do site

O site geralmente é dividido em cabeçalho, menu, conteúdo e rodapé:

Existem muitos diferentes designs de layout para escolher. No entanto, a estrutura acima é uma das mais comuns, e vamos estudá-la em detalhes neste tutorial.

Cabeçalho

O cabeçalho (header) geralmente está localizado no topo do site (ou logo abaixo do menu de navegação superior). Ele geralmente contém um logotipo (logo) ou o nome do site:

Exemplo

.header {
  background-color: #F1F1F1;
  text-align: center;
  margem: 20px;
}

Resultados:

Cabeçalho

Experimente pessoalmente

Barra de navegação

A barra de navegação contém uma lista de links para ajudar os visitantes a navegar pelo seu site:

Exemplo

/* Container da barra de navegação */
.topnav {
  excedente: escondido;
  cor-fundo: #333;
}
/* Link da barra de navegação */
.topnav a {
  float: left;
  exibir: bloco;
  cor: #f2f2f2;
  text-align: center;
  margem: 14px 16px;
  text-decoration: none;
}
/* Link - muda a cor ao passar o mouse */
.topnav a:hover {
  cor-fundo: #ddd;
  cor: preto;
}

Resultados:

Experimente pessoalmente

Conteúdo

O tipo de layout geralmente depende do seu público-alvo. Os layouts mais comuns são um dos seguintes (ou combinados):

  • 1-colunaLayout (usado geralmente em navegadores móveis)
  • 2-colunasLayout (usado geralmente em tablets e notebooks)
  • 3-colunasLayout (apenas para computadores de mesa)

1-coluna:

2-colunas:

3-colunas:

Vamos criar um layout de 3 colunas e alterá-lo para 1 coluna em telas menores:

Exemplo

/* Cria três colunas iguais, adjacentes e flutuantes */
.column {
  float: left;
  width: 33.33%;
}
/* Limpa a flutuação após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Layout responsivo - Empilha três colunas em vez de alinhá-las lado a lado em telas menores (largura de 600 pixels ou menor) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Resultados:

Manual de referência completo da tecnologia do site

Nosso manual de referência cobre todos os aspectos da tecnologia do site.

Inclui tecnologias padrão W3C: HTML, CSS, XML. E outras tecnologias, como JavaScript, PHP, SQL, etc.

Ferramenta de teste de exemplo online

No CodeW3C.com, oferecemos milhares de exemplos.

Usando nosso editor online, você pode editar esses exemplos e experimentar com o código.

Método de aprendizado rápido e fácil

Tempo é ouro, portanto, oferecemos conteúdo de aprendizado rápido e fácil de entender.

Aqui, você pode obter qualquer conhecimento necessário de uma maneira fácil e conveniente.

Experimente pessoalmente

Dica:Para criar um layout de 2 colunas, altere a largura para 50%. Para criar um layout de 4 colunas, use 25%.

Dica:Você gostaria de saber como a regra @media funciona? Leia nosso Consultas de mídia CSS Aprenda mais sobre esses tópicos neste capítulo.

Dica:Uma maneira mais moderna de criar um layout de colunas é usando CSS Flexbox. No entanto, o Internet Explorer 10 e versões anteriores não o suportam. Se precisar de suporte para IE6-10, use flutuantes (como mostrado acima).

Para obter mais informações sobre o módulo de layout Flexível, leia nosso Flexbox CSS Tutorial.

Colunas desiguais

O conteúdo principal (main content) é a parte maior e mais importante do seu site.

É comum que as larguras das colunas sejam diferentes, pois a maior parte do espaço é reservada para o conteúdo principal. O conteúdo secundário (se houver) geralmente é usado como navegação alternativa ou para especificar informações relacionadas ao conteúdo principal. Você pode alterar a largura conforme desejar, mas lembre-se de que sua soma deve ser 100%:

Exemplo

.column {
  float: left;
}
/* Colunas esquerda e direita */
.column.side {
  width: 25%;
}
/* Coluna do meio */
.column.middle {
  width: 50%;
}
/* Layout responsivo - Empilha três colunas em vez de alinhá-las lado a lado */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Resultados:

Manual de referência completo da tecnologia do site

Nosso manual de referência cobre todos os aspectos da tecnologia do site.

Inclui tecnologias padrão W3C: HTML, CSS, XML. E outras tecnologias, como JavaScript, PHP, SQL, etc.

Ferramenta de teste de exemplo online

No CodeW3C.com, oferecemos milhares de exemplos.

Usando nosso editor online, você pode editar esses exemplos e experimentar com o código.

Método de aprendizado rápido e fácil

Tempo é ouro, portanto, oferecemos conteúdo de aprendizado rápido e fácil de entender.

Aqui, você pode obter qualquer conhecimento necessário de uma maneira fácil e conveniente.

Experimente pessoalmente

Rodapé

O rodapé está localizado na parte inferior da página. Ele geralmente contém informações como direitos autorais e contatos:

Exemplo

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Resultados:

Rodapé

Experimente pessoalmente

Layout de site responsivo

Usando o código CSS acima, criamos uma layout de site adaptável que alternará entre duas colunas e uma coluna completa com base na largura da tela:

Experimente pessoalmente