Como fazer um layout DIV

A divisão (DIV) tag fornece aos desenvolvedores Hyper-Text Markup Language (HTML) com recipientes que definir o layout para um modelo de site. Usando tags DIV para criar um modelo é chamado "-Table menos CSS." CSS significa Cascading Style Sheet. Mesas foram anteriormente utilizados para projetar como os elementos HTML exibidas em uma página. CSS e DIV tags de proporcionar um estilo de programação mais fácil, então o código é mais limpo. Usando tags DIV reduz a chance de os elementos da tabela em falta, o que faz com que seu site para produzir erros no navegador de um leitor.

Abra o arquivo HTML com qualquer editor de texto simples. No "corpo" etiquetas, adicione o seguinte código DIV:
Neste exemplo, "div_main" contém o centro, o principal conteúdo do site. O DIV lista de fornecer uma barra de navegação no lado esquerdo e direito da página.
Definir a classe para o DIV principal. Coloque seu código de layout de classe dentro do "Cabeça" etiquetas na parte superior da sua página de código HTML. O código a seguir define o DIV principal para o centro da página:
formatar o "left_list" DIV. Sites geralmente têm uma barra de navegação à esquerda. Neste exemplo, uma DIV navegação esquerda é criado. Corre-se verticalmente para baixo do lado esquerdo do navegador do usuário. Use o seguinte código para formatar o seu DIV esquerda:
div.left; lista {
```
width: 11.3em
```
IR
```
position: absolute
```
IR
```
top: 1
```
IR
```
font-size: 95%
```
IR
```
padding-left: 2%
```
IR
```
padding-right: 2%
```
IR
```
margin-left: 1
```
IR
```
margin-right: 1
```
IR
```
left: 0
```
IR
}
Coloque este código dentro do "estilo" tag criada no passo dois.
Definir o layout para a direita; barra de navegação mão. Isso cria uma barra de navegação vertical no lado direito que coincide com a altura ea largura do DIV esquerda. Isto proporciona uma disposição uniforme. O código a seguir completa o seu modelo de layout DIV:
div.right; lista {
```
width: 11.3em
```
IR
```
position: absolute
```
IR
```
top: 1
```
IR
```
font-size: 95%
```
IR
```
padding-left: 2%
```
IR
```
padding-right: 2%
```
IR
```
margin-left: 1
```
IR
```
margin-right: 1
```
IR
```
direita: 0
```
IR
}
Salve as alterações código HTML e abra o arquivo com o seu navegador web. Isso testa o novo layout DIV e permite que você visualize as alterações de codificação.

De esta maneira? Compartilhar em redes sociais: