De repente, pensei nesse método quando estava escrevendo um layout de três colunas com CSS há alguns dias. Essa ideia me parece um pouco maluca. Se houver algo errado com ela, sinta-se à vontade para me dar alguns conselhos.
Quando preciso escrever um layout de três colunas, geralmente opto por usar o seguinte método de layout DIV:
Usar esse método de aninhamento pode, sem dúvida, reduzir muito a probabilidade de erros de código, mas, ao mesmo tempo, esse layout também é um pouco complicado e um pouco inconveniente para manutenção posterior. Um método que usamos frequentemente ao definir a navegação é usar a lista <ul> para o layout. A navegação pode ser descrita como um layout de múltiplas colunas. disposição das colunas.
Este é um layout de largura fixa, o que significa que não é muito fluido. O layout fluido ainda não foi testado. Vou tentar novamente quando tiver tempo. Cole o código deste layout abaixo.
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=”http://www.w3.org/1999/xhtml”> <cabeça> <meta http-equiv=”Tipo de conteúdo” content=”text/html; charset=utf-8″ /> <title>Usando UL para layout de múltiplas colunas</title> <style type="texto/css"> * {margem:0; preenchimento:0;} corpo { largura:100%; altura:100%; plano de fundo:#ddedfb; } #mainContent { largura:600px; margem:10px automático; } #cabeçalho,#rodapé { fundo:#8AC7FA; altura:80px; claro: ambos; } #rodapé { claro: ambos; preenchimento superior: 10px; } #contente { altura:300px; margem:10px automático; } #contentul { estilo de lista: nenhum; altura:100%; } #contentulli{ largura:150px; altura:100%; fundo:#8AC7FA; flutuar:esquerda; } #contentulli#li2 { largura:280px; margem:0 10px; } #content ul li#li2 ul li { largura:270px; altura:140px; margem:5px; plano de fundo:#0581F0; } </estilo> </head> <corpo> |
Este código pode ser exibido normalmente no IE7 e FF3. Ele não foi testado em outros navegadores. Se você tiver um método melhor, sugira-o.