Layout do site CSS
Layout do site
Um site geralmente é dividido em cabeçalhos, menus, conteúdo e rodapé:
Há toneladas de designs de layout diferentes para escolher. No entanto, a estrutura acima é uma das mais comuns, e vamos dar uma olhada mais de perto neste tutorial.
Cabeçalho
Um cabeçalho geralmente está localizado na parte superior do site (ou logo abaixo de um menu de navegação superior). Geralmente contém um logotipo ou o nome do site:
Exemplo
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Resultado
Header
Barra de navegação
Uma barra de navegação contém uma lista de links para ajudar os visitantes a navegar pelo seu site:
Exemplo
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Resultado
Contente
O layout nesta seção geralmente depende dos usuários-alvo. O layout mais comum é um (ou combiná-los) dos seguintes:
- 1 coluna (geralmente usado para navegadores móveis)
- 2 colunas (geralmente usado para tablets e laptops)
- Layout de 3 colunas (usado apenas para desktops)
1-coluna:
2 colunas:
3 colunas:
Vamos criar um layout de 3 colunas e alterá-lo para um layout de 1 coluna em telas menores:
Exemplo
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Resultado
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Dica: Para criar um layout de 2 colunas, altere a largura para 50%. Para criar um layout de 4 colunas, use 25%, etc.
Dica: Você quer saber como funciona a regra @media? Leia mais sobre isso em nosso capítulo CSS Media Queries .
Dica: Uma forma mais moderna de criar layouts de colunas é usar CSS Flexbox. No entanto, ele não é compatível com o Internet Explorer 10 e versões anteriores. Se você precisar de suporte ao IE6-10, use floats (como mostrado acima).
Para saber mais sobre o Módulo de Layout de Caixa Flexível, leia nosso capítulo CSS Flexbox .
Colunas Desiguais
O conteúdo principal é a maior e mais importante parte do seu site.
É comum com larguras de colunas desiguais , de modo que a maior parte do espaço é reservada para o conteúdo principal. O conteúdo secundário (se houver) é frequentemente usado como uma navegação alternativa ou para especificar informações relevantes ao conteúdo principal. Altere as larguras como quiser, lembre-se apenas que deve somar 100% no total:
Exemplo
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Resultado
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Rodapé
O rodapé é colocado na parte inferior da sua página. Geralmente contém informações como direitos autorais e informações de contato:
Exemplo
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Resultado
Layout de site responsivo
Usando alguns dos códigos CSS acima, criamos um layout de site responsivo, que varia entre duas colunas e colunas de largura total, dependendo da largura da tela:
Já ouviu falar dos Espaços W3Schools ? Aqui você pode criar seu site do zero ou usar um modelo e hospedá-lo gratuitamente.
Comece gratuitamente ❯* não é necessário cartão de crédito