Video: Flexbox Tutorial (CSS): Real Layout Examples

layouts fluidos são óptimos. Eles são muito flexível, e eles não são difíceis de construir em HTML5 e CSS3. Às vezes, porém, é bom usar um layout de largura fixa, especialmente se você quiser que o seu layout de se conformar com uma imagem de fundo particular.

O atributo principal de uma largura fixa disposição é o uso de uma medição fixo (quase sempre de pixels), em vez das medições percentuais utilizados em uma disposição de fluido.

Como configurar o HTML

Como de costume, o código HTML é mínima. Ele contém algumas divs nomeados.

Largura fixa layout
Coluna esquerda
Coluna direita
Rodapé

Corrigir a largura com CSS

Após o HTML está configurado, você pode usar CSS para reforçar o esquema de duas colunas.

Aqui está o código CSS:

#header {background-color: # e2e393-border-bottom: 3px preto sólido-text-align: center-width: 800px; padding-top: 1em -} # esquerda {float: left; width: 200px; clear: left; border-right: 1px solid black-height: 30em-overflow:-auto-preenchimento direita: .5em -} # direito {float: left; width: 570px; height: 30em-overflow:-auto-padding-left: .5em- } #footer {width: 800px; text-align: center-background-color: # e2e393-border-top: 3px double black-clara: both-}

É tudo muito simples:

1. Colorir cada elemento para ver o que está acontecendo.

   Video: HTML5 Tutorial 11 ITA - Layout

   Comece dando a cada Div uma cor de fundo diferente para que você possa ver o que está acontecendo.

2. Determinar a largura total do layout.

   Escolha uma largura meta para todo o layout. 800 pixels foi escolhido porque é uma largura razoavelmente padrão.

3. 
   
   
   

   Ajustar as larguras dos elementos de toda a página.

   Muitas vezes é mais fácil começar com elementos como o cabeçalho e rodapé que muitas vezes ocupam toda a largura do design.

4. Flutuar as colunas.

   Video: CSS3 Flexbox Essentials Flexible Box Layouts Tutorial

   Flutuador cada coluna à esquerda.

5. Definir as larguras das colunas.

   Comece fazendo as larguras das colunas adicionar até a largura de todo o design. Mais tarde você vai ajustar um pouco para as margens e fronteiras.

6. Desmarque a coluna da esquerda.

   Garantir a coluna da esquerda tem a clear: left regra aplicada.

7. Jogo altura de coluna.

   Dar a cada coluna da mesma altura. Isso faz com que as coisas parecem bem se você adicionar bordas ou cores de fundo para as colunas.

8. Ajuste fronteiras e estofamento.

   Use fronteiras, preenchimento e margem para ajustar sua página para obter a aparência desejada.

9. Ajustar as larguras de novo.

   Adicionar bordas, preenchimento e margem pode alterar as larguras dos elementos existentes. Depois de ter modificado esses atributos, dê uma olhada cuidadosa em seu layout para ter certeza de que não ficar confuso, e modificar as várias larguras, se necessário.