Como projetar o mesmo layout usando CSS? Usando o atributo flutuador. Utilizando CSS você basicamente dividir o conteúdo da sua página em blocos, delimitada pelas /... /tags. O atributo de flutuação permite que você coloque (float) uma parte do seu conteúdo ao longo da margem direita ou à esquerda do seu bloco.
O resto do conteúdo do bloco irá fluir em torno de sua parte flutuante. Vamos fazer isso. Vamos precisar de uma página HTML e uma folha de estilo CSS. Vamos olhar para o HTML primeiro.
Como você pode ver, nós dividimos cada porção lógica da nossa página em blocos. Como você pode ver, todos os elementos da nossa página (cabeçalho, rodapé, navegação e conteúdo) estão contidos em um bloco chamado recipiente, que, basicamente, é a página inteira. Nós colocaremos nossos elementos no interior do espaço "container".
Como você pode imaginar, estamos indo para flutuar o bloco de navegação à esquerda do nosso bloco "container".
Aqui está o código para trabalhar a magia.
Como Eu disse, eu não vou entrar em detalhes aqui, explicando que todos os meios de comando. Mas vamos analisá-lo rapidamente, apontando o que nos interessa. Em primeiro lugar, atribuída a fonte para as páginas, especificando seu atributo. Nós também atribuída uma formatação para o H1 e H2 tags.
As chamadas "div # algo" são onde vamos atribuir uma formatação e um comportamento específico para cada um dos blocos que definimos em nosso html. Por favor, note as chamadas para navegação e conteúdo. Nós atribuído à navegação a propriedade "left", colocando-o no lado esquerdo da página. Em seguida, definida a largura da coluna principal e a margem de conteúdo a partir da coluna. Por favor, note o "clear: left" atributo nós designado para o rodapé. Um erro comum é esquecer este atributo para o rodapé.
Se você esquecê-lo, seu rodapé não será colocado na parte inferior da página, mas na parte inferior da área de conteúdos e à esquerda da sua área de navegação. Se a área de navegação é mais longa do que o seu conteúdo principal, ele irá prolongar-se abaixo do rodapé. Usando o "clear: left" atributo que evitar este erro comum. Você pode argumentar que podemos chegar ao mesmo resultado com menos esforço e menos tabelas de códigos usando. Mas lembre-s