Tutorial de padrões WEB, dia 9: primeiro exemplo de layout CSS

Autor：Eve Cole Data da Última Atualização：2009-05-31 00:36:21

1. Determine o layout
O esboço inicial do projeto w3cn é o seguinte:

Se você usar o método de design de tabela, geralmente é um layout de três linhas com linhas superior, intermediária e inferior. Diagrama de layout de tabela . Se estiver usando DIV, considero usar três colunas para layout, como esta .

2. Defina o estilo corporal

Primeiro defina o estilo do corpo de toda a página. O código é o seguinte:

corpo { MARGEM: 0px;

PADDING: 0px;

FUNDO: url(../images/bg_logo.gif) #FEFEFE sem repetição no canto inferior direito;

FAMÍLIA DE FONTE: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;

COR: #666;

TAMANHO DA FONTE: 12px;

ALTURA DA LINHA:150% }

A função do código acima foi explicada em detalhes no tutorial do dia anterior e todos devem entendê-la rapidamente. A margem da borda é definida como 0; a cor de fundo é #FEFEFE, a imagem de fundo é bg_logo.gif, e a imagem está localizada no canto inferior direito da página, sem repetição o tamanho da fonte é definido como 12px; a cor é #666; a altura da linha é 150%.

3. Defina a div principal

A primeira vez que usei o layout CSS, decidi usar um layout de três colunas de largura fixa (que é mais simples do que o design de resolução adaptativa, hoho, não diga que sou preguiçoso, implemente um simples primeiro para ganhar alguma confiança !). Defina a largura da esquerda, do meio e da direita como 200:300:280 respectivamente, definida da seguinte forma em CSS:

/*Define o estilo da coluna esquerda da página*/

#esquerda{LARGURA:200px;

MARGEM: 0px;

PADDING: 0px;

FUNDO: #CDCDCD;

}

/*Definir estilos de coluna na página*/

#meio{ POSIÇÃO: absoluto;

ESQUERDA: 200px;

SUPERIOR:0px;

LARGURA:300px;

MARGEM: 0px;

PADDING: 0px;

FUNDO: #DADADA;

}

/*Define o estilo da coluna direita da página*/

#direita{ POSIÇÃO: absoluta;

ESQUERDA:500px;

SUPERIOR:0px;

LARGURA:280px;

MARGEM: 0px;

PADDING: 0px;

FUNDO: #FFF;

Nota: usei POSITION: absoluto; ao definir os divs da coluna do meio e da coluna da direita e, em seguida, defini LEFT:200px;TOP:0px; o posicionamento absoluto da camada. Defina a coluna do meio como 200px da borda esquerda da página e 0px da parte superior; defina a coluna da direita como 500px da borda esquerda da página e 0px da parte superior;

Neste momento, o código de toda a página é:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<cabeça>

<title>Bem-vindo ao novo "Web Designer": tutoriais e promoções padrão da web</title>

</head>

<corpo>

<div id="left">Coluna esquerda da página</div>

<div id="middle">Coluna do meio da página</div>

<div id="right">Coluna direita da página</div>

</body>

</html>

Neste momento, o efeito de página só pode ver três retângulos cinza justapostos e uma imagem de fundo. Mas quero que a altura seja em tela cheia, o que devo fazer?

4.100% de altura adaptativa?

Para manter as três colunas na mesma altura, tentei definir "height:100%;" em #left, #middle e #right, mas descobri que não havia nenhum efeito de altura adaptativo esperado. Após algumas tentativas, tive que dar a cada div uma altura absoluta: "height:1000px;", e à medida que o conteúdo aumentava, precisava corrigir constantemente esse valor. Não há como ajustar a altura? À medida que o próprio estudo de Ajie se aprofundou, ele descobriu uma solução flexível. Na verdade, não há necessidade de definir 100%. Ficamos profundamente presos ao pensamento da tabela. Este método será apresentado em detalhes na próxima seção do estudo.