Como construir um Largura Floating layout fixo para HTML5 e CSS3 Programação

layouts fluidos são fantástico. 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 para estar em conformidade 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 de as medições percentagem utilizada em uma disposição de fluido.

image0.jpg

Como configurar o HTML

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

fixedWidth.html
Largura fixa layout
Coluna esquerda
Coluna direita
Rodapé

Fixa 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.

    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 de destino para todo o layout. 800 pixels foi escolhido porque é uma largura razoável 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.

    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.

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

  7. Definir 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.

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

  9. Ajustar novamente larguras.

    Adicionar bordas, preenchimento e margem pode alterar as larguras dos elementos existentes. Depois de modificar 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.

Semelhante

menu