Há alguns anos, DIV+CSS começou a se tornar gradualmente o método preferido de web design. Atualmente, DIV+CSS se tornou o padrão para web design. Muitos sites nacionais completaram a reconstrução de TABLE para DIV+CSS. anos. . O autor também é um web designer que prefere esse método. Há três anos uso div+css para fornecer designs para clientes. Então, quais vantagens ele tem em comparação com TABLE? Vamos falar sobre algumas experiências e entendimentos pessoais, na esperança de serem úteis para colegas e pessoal relacionado.
A maior vantagem de usar DIV+CSS em web design é padronizar o código web, abandonar o método desatualizado de layout de tabela e realizar a separação entre conteúdo, desempenho e comportamento. O código HTML é melhor estruturado e mais fácil de ler e manter. e o tamanho do arquivo da página da web também é menor. Por exemplo, após uma reconstrução recente do site de um cliente, o tamanho do arquivo da página da web era inferior à metade do tamanho original, ocupando menos espaço no site e abrindo mais rapidamente.
Os métodos DIV+CSS e TABLE são muito diferentes em design. É necessário um planejamento cuidadoso antes de começar a projetar uma página da web, como nomear os elementos que compõem a página da web para facilitar a definição de estilo em CSS. . Os estilos comuns de todo o site podem ser colocados em um arquivo CSS separado. Atributos públicos comuns incluem: largura da página da web, cor de fundo, imagem de fundo, tamanho padrão da fonte, cor, estilo do link, etc. o arquivo css É melhor focar em um bloco e indicar qual página da web ou parte da página da web ele está antes do bloco. Isso não apenas reduzirá o tamanho do arquivo CSS, mas também evitará confusão e tornará a manutenção mais conveniente. Vale ressaltar que os estilos não devem ser incorporados ao código da página da web para separar completamente o conteúdo e o estilo.
Para fazer um bom trabalho em web design DIV + CSS, há três pontos que precisam ser entendidos.
1. Atributo flutuante: DIV (camada) ocupa uma linha inteira por padrão. Para designs de layout comuns de duas ou várias colunas, você precisa ser capaz de definir corretamente os atributos flutuante e de largura para obter o efeito. Após a conclusão do layout de múltiplas colunas, se uma camada que ocupa o banner for seguida, será necessário definir o atributo clear para limpar a camada flutuante.
2. Modo caixa: A camada possui atributos como largura, altura, borda, espaçamento interno e espaçamento externo. O espaço real ocupado pela camada é a soma dos valores dos atributos acima. layout elegante. Belo layout da web.
3. Aninhamento de camadas: Todos os web designers experientes sabem que não é aconselhável aninhar muitas camadas, geralmente não mais do que 3 camadas. Muito aninhamento levará a código complexo e redundante, dificuldade de manutenção e operação lenta. Além disso, no layout de várias colunas, a camada flutuante pode ser usada e não há necessidade de configurar uma camada geral do IE para incorporação.
Mencione o tópico de compatibilidade do navegador separadamente. Comparado ao layout TABLE, DIV+CSS é mais propenso a problemas de incompatibilidade com vários navegadores. O principal motivo é que navegadores diferentes têm valores padrão diferentes para padrões da web. O principal na China é o IE, com Firefox e Chrome menos usados. Em termos de testes de compatibilidade, primeiro você precisa garantir que nenhum problema ocorra em várias versões do IE. Aqui estão alguns métodos e técnicas projetados para ajudá-lo a encontrar soluções específicas. problemas no site.
Resumo: DIV + CSS tem muitas vantagens sobre TABLE Os web designers devem abandonar o método TABLE o mais rápido possível, o que será mais propício para que eles aprendam profundamente o conhecimento de DIV + CSS. Não é difícil aprender e usar o método de web design DIV + CSS. Contanto que você entenda alguns conhecimentos básicos e faça mais alguns casos, você irá gradualmente entendê-lo e dominá-lo.
Este artigo foi publicado por [Hippie], o webmaster de http://www.swjns.com . Guarde o URL para reimpressão.
Obrigado ao hbjsp pela sua contribuição