Em meu tutorial anterior “Layout Básico dos Nove Palácios”, apresentei o método de uso de posicionamento relativo e posicionamento absoluto para criar o layout básico dos Nove Palácios. Este é um método que está mais alinhado com o pensamento inercial das pessoas. Parece que tudo no processo de produção é natural, porém, por causa do nojento BUG de paridade do IE6, tornou-se um pouco fora do alcance deste layout. método seja universal, porque a maioria dos usuários domésticos ainda usa o IE6, e não podemos perder esses usuários por causa disso.
Atualmente não há cura para esse BUG e não há hacks que possam ser usados. A única maneira de usá-lo é contorná-lo. Em outras palavras, quero localizar os quatro contêineres de canto da grade de nove quadrados. O método de posicionamento absoluto não pode ser usado. Isso derrubará completamente o método usado em meu artigo anterior. de novo.
Então, quais outras tecnologias podem salvar esse BUG de dificuldades? Sabemos que se você usar o método flutuante esquerdo e direito, poderá compensar com precisão o objeto do elemento, e esse método também pode evitar o BUG de paridade do IE6. OK, vamos usá-lo.
Pontos-chave e dificuldades no layout
Ainda construímos a estrutura do nosso novo modelo de acordo com a estrutura da tabela, mas desta vez será diferente da estrutura do artigo anterior. Os pontos-chave e dificuldades aos quais precisamos prestar atenção neste modelo são os dois pontos a seguir:
1. Os valores de largura dos dois contêineres intermediários t_m e b_m devem ser um valor percentual, caso contrário, a expansão dinâmica esquerda e direita de toda a grade de nove quadrados não pode ser garantida e não deve ser um valor de pixel fixo. Sua largura é igual à largura total do contêiner menos a soma das larguras dos dois contêineres de canto como uma porcentagem. A fórmula de cálculo é:
A largura de t_m (ou b_m) = (largura total do contêiner - (largura do contêiner no canto superior esquerdo + largura do contêiner no canto superior direito)) / largura total do contêiner
Ou seja, a largura de t_m ou b_m não é 100%. No entanto, a largura dos dois contêineres t_l e t_r é geralmente a largura de uma imagem em casos reais, portanto é geralmente um valor de largura fixo, de modo que em os mesmos três Em um contêiner, a largura nos lados esquerdo e direito é um valor fixo, mas o meio requer uma porcentagem, e a largura total desses três contêineres deve somar 100%.
Aqui usamos um método relativamente seguro para fazer com que o contêiner do meio atinja a porcentagem de largura ideal:
Podemos usar um contêiner DIV e definir seu preenchimento: 0 10px não defina sua largura. Por padrão, sua largura é 100%. Como os valores de preenchimento esquerdo e direito estão definidos, a largura interna é o valor de largura ideal de t_m que desejamos, então definimos um contêiner dentro dele e a largura desse subcontêiner é definida como 100%. A cor de fundo deste subcontêiner pode ser definida como uma imagem de fundo lado a lado horizontalmente à esquerda e à direita. Este subcontêiner é o contêiner superior que usaremos. Ele atende aos nossos requisitos especiais para valores de largura.
Portanto, a estrutura de t_m pode ser transformada na seguinte estrutura:
<div class="top"><span class="t_m"></span></div>
No entanto, esta definição causará outro problema. Este problema existe em navegadores abaixo do IE7. Como definimos o preenchimento, ele também gerará patches internos esquerdo e direito na camada intermediária do corpo abaixo. IE7?
Portanto, a solução é usar um truque HACK aqui para IE6 e IE7:
.b_l{margem esquerda:0px;+margem esquerda:-10px;_margem esquerda:-10px;}
.b_r{margem direita:0px;+margem direita:-10px;_margem direita:-10px;}
Esta frase define diferentes valores de deslocamento para três navegadores e desloca b_l e b_r para a esquerda e para a direita na posição especificada.
2. Os valores de altura dos dois contêineres b_l e b_r devem ser iguais para que possam colocar a cor de fundo verticalmente para baixo. Dessa forma, quando a altura do conteúdo na área de conteúdo principal central (contexto) muda, a cor de fundo em ambos os lados pode sempre manter a mesma altura da área de conteúdo principal (contexto). Ou seja, eles podem esticar livremente sua altura de acordo com a altura do corpo do conteúdo.
Podemos usar o método de múltiplas colunas com a mesma altura que é frequentemente usado no trabalho diário para lidar com este problema. Este método usa uma combinação de patches internos e patches externos negativos para atingir a mesma altura para várias colunas:
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
Definimos o valor padding-bottom do patch interno inferior de m_l e m_r para um valor relativamente grande. Por exemplo, eu os defini para 30000px (você pode configurá-lo para o valor que desejar). não exceda este valor de altura. Em seguida, defina o patch externo inferior (margem inferior) para o mesmo valor negativo do valor do patch interno inferior (preenchimento inferior), puxe-o de volta para sua posição original e defina o contêiner total (caixa) para overflow:hidden;, Corte o excesso de altura para garantir que as duas colunas tenham a mesma altura.
Depois de resolver os dois problemas difíceis acima, o resto é simples e divertido! [Página cortada]
camada estrutural
Agora ajustamos a camada de estrutura com base no caso anterior, então ela se torna a seguinte estrutura:
A seguir está o conteúdo citado: <div class="caixa"> <!--Segunda linha—área de conteúdo do meio*/--> <!--Terceira linha—parte inferior*/--> |
camada de estilo
Aqui estão as principais configurações de estilo:
A seguir está o conteúdo citado: /*Contêiner total*/ .box{overflow:oculto;largura:50%;margem:50px auto 0;fundo:#fff;} /*Estilo superior*/ /*Estilo intermediário*/ /*Estilo inferior*/ |
Você pode usar oito imagens para fazer uma linda caixa de grade de nove quadrados. Olha como é perfeito.
Este modelo foi testado nos seguintes navegadores:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
A seguir está o conteúdo citado: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Link para este artigo: http://www.blueidea.com/tech/web/2009/6805.asp