Clique aqui para retornar à coluna do tutorial Wulin.com HTML. Se você deseja navegar no tutorial do CSS, clique aqui.
Acima: Linguagem de marcação - Substituição de imagem . Capítulo 15 Especifique um estilo para <body>
Um dos benefícios de definir o conteúdo e os efeitos de exibição separadamente é a flexibilidade. Ao usar o CSS para controlar o layout do site (o método usado no capítulo 12), você pode controlar os elementos de design de todo o site, alterar algumas regras e atualizar dramaticamente milhares de páginas.
Um dos exemplos de conveniência do uso do CSS para controlar o layout é especificar um estilo para <body> e, ao adicionar tags de classe ou ID às tags <body>, você pode personalizar qualquer tags na página. Não há problema de definições repetidas.
Neste capítulo, exploraremos como usar uma estrutura de tags para alternar duas configurações de layout diferentes adicionando classe à tag <cody>. Layouts de duas colunas ou três colunas.
Assim como ao redesenhar um site para empresa rápida usando a tecnologia de layout CSS, um dos desafios é: embora todas as páginas compartilhem a mesma navegação e final da página, dois layouts diferentes também são necessários.
O primeiro layout é a página do índice (página inicial), veja a Figura 15-1. Esta é uma página com função de navegação, permitindo que os usuários continuem a penetrar na estrutura do diretório do site. Decidimos usar um layout de três colunas para essas páginas.
Figura 15-1 Demonstração da página de índice de três colunas da empresa Fast Company
O layout da segunda página é a página interna Figura 15-2. Qualquer página que pareça que o destino use esse layout. Para melhorar a legibilidade, decidimos omitir a coluna esquerda e deixar duas colunas, ou seja, uma grande coluna coloca conteúdo e o outro coloca anúncios.
Figura 15-2 Demonstração da página de texto de duas colunas da empresa rápida.
A razão pela qual explico isso não é provar que quebramos o grande mistério de um certo layout, mas demonstrar que adicionar classe à tag <body> pode ajustar a largura da coluna e colocar ou omitir a terceira coluna de acordo com a forma da página. Ao criar esse efeito, nenhuma regra é repetida e nenhuma folha de estilo adicional é introduzida. Marcas e estruturas de estilo são adicionadas.
Depois de começar a descrever a estrutura de marcação compartilhada pelas duas páginas, essas narrativas começarão a fazer sentido. Para alcançar o layout da coluna, o método de posicionamento absoluto mencionado no Capítulo 12 será usado.
A estrutura de tags simplificada da página de texto é assim:
<div id = cabeçalho>
... Informações do cabeçalho aqui ...
</div>
<div id = content>
... conteúdo aqui ...
</div>
<div id = direita>
... informações da coluna certa ...
</div>
<div id = rodapé>
... informações do rodapé ...
</div>
Usando as regras CSS como #Content e #Footer, além de um patch direito à direita que é suficiente para usar o método de posicionamento absoluto para colocar em #Right. Neste exemplo, 190 pixels são suficientes.
#content, #footer {
margem: 10px 190px 10px 10px;
}
Para páginas de índice, a estrutura de marcação é exatamente a mesma, portanto, não há necessidade de copiar uma regra CSS compartilhada, mas um <div> extra é adicionado à esquerda do #Content como a terceira coluna (#Left).
<div id = cabeçalho>
... Informações do cabeçalho aqui ...
</div>
<div id = content>
... conteúdo aqui ...
</div>
<div id = esquerda> ... Informações da coluna da esquerda ... </div> <div id = direita> ... informações da coluna certa ... </div><div id = rodapé>
... informações do rodapé ...
</div>
Para esta estrutura de três colunas, não apenas devemos definir o patch externo certo para #Content e #Footer para acomodar a coluna direita, mas também devemos definir o patch externo esquerdo para acomodar a recém-adicionada coluna esquerda.
No entanto, o patch externo esquerdo foi definido como 10 pixels para corresponder ao layout da página de texto predefinido que possui apenas colunas duplas.
Uau, estamos presos, como devemos continuar? Por favor, continue lendo.
Página anterior 1 2 3 Próxima página Leia o texto completo