O que saber
- Primeiro passo importante: planeje seu layout no papel.
- Próxima etapa: comece com um contêiner HTML vazio.
- Em seguida, use a tag de título para cabeçalho> crie duas colunas> adicione duas colunas dentro da segunda coluna> adicione rodapé.
Este artigo explica como construir um layout de 3 colunas em CSS. As instruções se aplicam a CSS3 e anteriores.
Desenhe Seu Layout
- Não mais do que 900 pixels de largura
- Calha de 20 px à esquerda
- 10 px entre colunas e linhas
- Colunas com 250, 300 e 300 pixels de largura
- A linha superior tem 150 px de altura
- A linha inferior tem 100 px de altura
Escreva HTML / CSS básico e crie um elemento de contêiner
Como esta página será um documento HTML válido, comece com um contêiner HTML vazio. Adicione os estilos CSS básicos para zerar as margens, bordas e preenchimentos da página. Embora existam outros estilos CSS padrão para novos documentos, esses estilos são o mínimo necessário para obter um layout limpo. Adicione-os ao cabeçalho do seu documento. Para começar a construir o layout, coloque um elemento de contêiner. Às vezes acontece que você pode se livrar do contêiner mais tarde, mas para a maioria dos layouts de largura fixa, ter o elemento do contêiner facilita o gerenciamento em diferentes navegadores da Web.
Estilize o recipiente
O contêiner define a largura do conteúdo da página da web, bem como as margens externas e o preenchimento interno. Para este documento, o contêiner tem 870 pixels de largura e uma calha de 20 pixels à esquerda. A medianiz é configurada com um estilo de margem, mas o preenchimento do contêiner é zerado para evitar que quaisquer elementos sejam tão largos quanto o contêiner. Se você salvar o documento agora, será difícil ver o contêiner porque ele não contém nada. Se você adicionar um texto de espaço reservado, poderá ver o elemento do contêiner com mais clareza.
Use uma tag de título para o cabeçalho
Como você decide estilizar a linha do cabeçalho depende muito do que está nela. Se a linha do cabeçalho tiver apenas um gráfico de logotipo e título, usar uma tag de título (
) faz mais sentido do que usar um
Para obter três colunas, comece construindo duas colunas
Ao construir um layout de três colunas com CSS, você precisa dividir seu layout em grupos de dois. Portanto, para este layout de três colunas, as colunas do meio e da direita são agrupadas e colocadas ao lado da coluna da esquerda em um layout de duas colunas, onde a coluna da esquerda tem 250 px de largura e a coluna da direita tem 610 px de largura (300 cada para as duas colunas , mais 10 px para a sarjeta entre eles). A coluna da esquerda é flutuada para a esquerda, enquanto a outra é flutuada para a direita. Como a largura total de ambas as colunas é de 860 px, há uma medianiz de 10 px entre elas.
Adicionar duas colunas dentro da segunda coluna larga
Para criar as três colunas, adicione dois divs dentro da segunda coluna mais larga, assim como você adicionou 2 divs dentro da coluna do contêiner na última etapa. Como essas duas caixas de 300 px estão dentro de uma caixa de 610 px, haverá novamente uma calha de 10 px entre elas.
Adicionar no rodapé
Agora que o resto da página está estilizado, você pode adicionar o rodapé. Use um último div com um id de “rodapé” e adicione conteúdo para que você possa vê-lo. Você também pode adicionar uma borda na parte superior para saber onde começa.
Adicione seus estilos e conteúdos pessoais
Agora que o layout terminou, você pode começar a adicionar seus próprios estilos e conteúdo pessoais. Lembre-se de que as bordas do cabeçalho e rodapé foram adicionadas para mostrar as seções de layout, não especificamente para design.