O layout CSS exige que você pense no layout do seu site como um todo e, em seguida, pegue as peças e coloque-as juntas. Aprenda a construir um layout simples de 3 colunas com CSS.
01 de 09Desenhe seu layout
Você pode desenhar seu layout em papel ou em um programa gráfico. Se você já tem uma armação de arame ou um design ainda mais amplo em mente, simplifique-a para as caixas básicas que compõem o site. Esse design que acompanha este artigo possui três colunas na área de conteúdo principal, além de um cabeçalho e rodapé. Se você olhar de perto, você pode ver que as três colunas não são iguais em largura.
Depois de ter seu layout desenhado, você pode começar a pensar em dimensões. Este exemplo de design terá as seguintes dimensões básicas:
- Não mais do que 900 pixels de largura
- Calha de 20 px à esquerda
- 10 px entre colunas e linhas
- Colunas com 250px, 300px e 300px de largura
- A fileira de cima tem 150px de altura
- A fila de baixo tem 100px de altura
Escreva HTML / CSS básico e crie um elemento Container
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 à cabeça do seu documento:
Para começar a construir o layout, insira um elemento de contêiner. Às vezes acontece que você pode se livrar do contêiner posteriormente, mas para a maioria dos layouts de largura fixa, ter o elemento contêiner facilita o gerenciamento em diferentes navegadores da Web. Então, no corpo, coloque isso: E na folha de estilo CSS, coloque: O contêiner define a largura do conteúdo da página da Web, bem como as margens em torno do exterior 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 no contêiner é zerado para evitar que qualquer elemento seja tão largo quanto o contêiner. #container { largura: 870px; margem: 0 0 0 20px; / * superior direito inferior esquerdo * / preenchimento: 0; } Se você salvar seu documento agora, será difícil ver o contêiner porque não tem nada nele. Se adicionar texto de espaço reservado, você poderá ver o elemento do contêiner mais claramente. Como você decide estilizar a linha de cabeçalho depende muito do que está nela. Se a linha de cabeçalho tiver apenas um logotipo gráfico e título, use uma tag de título ( O HTML da linha de cabeçalho fica na parte superior do contêiner e se parece com isso: Em seguida, para definir os estilos, foi adicionada uma borda vermelha na parte inferior para que você pudesse ver onde ela termina, as margens e preenchimento foram zerados, a largura definida como 100% e a altura como 150px: #container h1 { margem: 0; preenchimento: 0; largura: 100%; altura: 150 px; float: esquerda; border-bottom: # c00 sólido 3px; } Não esqueça de flutuar este elemento com o float: left; propriedade. A chave para escrever layouts CSS é flutuar tudo - até mesmo coisas que são da mesma largura que o contêiner. Dessa forma, você sempre sabe onde os elementos estarão na página. Um seletor descendente de CSS aplicou estilos apenas a elementos H1 que estão dentro do elemento #container. Quando você cria um layout de três colunas com CSS, precisa dividir seu layout em grupos de dois. Portanto, para esse layout de três colunas, a coluna do meio e da direita e agrupada e colocada ao lado da coluna esquerda em um layout de duas colunas onde a coluna da esquerda tem 250px de largura e a da direita de 610px (300 cada para as duas colunas , mais 10px para a calha entre eles). O HTML parece com isso: Ut aliquip ex ea commodo consequat. Este tipo de objeto pode ser usado em vez de um dedo, por exemplo, por exemplo. Repreender em voluptate quis nostrud exercitation eu fugiat nulla pariatur. O tal dillum dolore ullamco laboris nisi ut alipip ex ea commodo consequat. O uso de um mínimo de veneno, sed do eosmod tempo incididunt ullamco laboris nisi. Ut labore e dolore magna aliqua. Velit esse dolce dolore eu fugiat nulla pariatur. O texto do espaço reservado nas colunas os torna mais visíveis durante o teste. O CSS é assim: #container # col1 { largura: 250px; float: esquerda; } #container # col2outer { largura: 610 px; flutuar: certo; margem: 0; preenchimento: 0; } A coluna à esquerda é flutuada para a esquerda, enquanto a outra é flutuada para a direita. Como a largura total de ambas as colunas é de 860px, há uma medianiz de 10px entre elas. Para criar as três colunas, adicione duas divs dentro da segunda coluna mais ampla, assim como você adicionou 2 divs dentro da coluna do contêiner na última etapa. O HTML parece com isso: O uso de um mínimo de veneno, sed do eosmod tempo incididunt ullamco laboris nisi. Ut labore e dolore magna aliqua. Velit esse dolce dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis servipeptum, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur um sapiente delectus, sed perspiciatis unde omnis tempora incidunt ut labore et dolore. E o CSS se parece com isso: # col2outer # col2mid { largura: 300px; float: esquerda; } # col2outer # col2side { largura: 300px; flutuar: certo; } Como essas duas caixas com 300px de largura estão dentro de uma caixa de 610px, haverá novamente uma calha de 10px entre elas. Agora que o restante da página é estilizado, você pode adicionar o rodapé. Use uma última div com um ID de "rodapé" e adicione conteúdo para poder vê-lo. Você também pode adicionar uma borda no topo, para saber onde ela começa. O HTML: O CSS: #container #footer {
float: esquerda;
largura: 870px;
border-top: # c00 sólido 3px;
} 08 de 09 Agora que você terminou o layout, pode começar a adicionar seus próprios estilos e conteúdos pessoais. Lembre-se de que as bordas no cabeçalho e no rodapé foram adicionadas para mostrar as seções de layout, não especificamente para o design. Aqui está o documento inteiro, HTML e CSS: Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam. Nam libero tempore. Estilizar o contêiner
Use uma tag de manchete para o cabeçalho
) faz mais sentido do que usar um
Minha linha de cabeçalho
Para obter três colunas, comece construindo duas colunas
Adicione duas colunas dentro da segunda coluna larga
Adicionar no rodapé
Adicione em seus estilos pessoais e conteúdo
O HTML final / CSS
Minha linha de cabeçalho
