A grade perfeita de nove quadrados com três níveis de separação

Em meu tutorial anterior " O layout de grade de nove gongos inquebrável ", apresentei um método de layout de grade de nove quadrados relativamente perfeito, que pode ajustar sua largura e altura de maneira totalmente flexível para obter um estilo de layout mais flexível.

No entanto, para reflectir perfeitamente a função elástica, o preço pago ainda é muito pesado. Do ponto de vista estrutural, a estrutura é relativamente inchada, mas cada nó é indispensável e não pode ser racionalizado, caso contrário conduzirá à sua flexibilidade. não é suficiente.

Em aplicações práticas, muitos designers podem não gostar desta estrutura de layout e considerá-la redundante.

Um design de grade de nove quadrados perfeito deve ser uma estrutura separada em três camadas. A grade de nove quadrados ideal que desejo alcançar deve ser assim:

1. Você só precisa aplicar um estilo de classe ao contêiner onde deseja aplicar o layout de grade de nove quadrados, e esse layout pode ser criado automaticamente. A estrutura deve ser simplificada o suficiente para que um estilo de cores ricas possa ser alcançado com apenas uma pequena quantidade de estrutura.
2. Capacidade de aplicar esse estilo de layout a vários contêineres em uma página.
3. O design de separação de três camadas pode fornecer esquemas de cores ricos, facilitando a aplicação de estilos diferentes em várias caixas com estilos diferentes.
4. Seja robusto o suficiente para ser compatível com a maioria dos navegadores.

Portanto, neste artigo tentarei aproximar esse layout o mais próximo possível desse estado idealizado, tornando-o mais adequado para aplicação em diversos aspectos.

Em relação ao primeiro e segundo pontos, se você quiser manter sua flexibilidade e conseguir um efeito simplificado, ou seja, se quiser “ter seu bolo e comê-lo também”, não há outra maneira a não ser usar o encapsulamento js. Pode-se dizer que esta é uma espécie de abordagem de “esconder os ouvidos e roubar a campainha”. Sim, tenho que admitir que este método de encapsulamento com JS não simplifica sua estrutura em essência, mas apenas utiliza uma forma dinâmica de encapsular sua. estrutura. Crie, mas tem um efeito imediato em estruturas html redundantes, e todas as estruturas redundantes são invisíveis de uma só vez.

Vamos aprender como melhorar a nossa grelha de nove quadrados a partir da abordagem de separação de três camadas.

Camada estrutural :

Esta é a área principal que queremos agilizar ao máximo. Usamos js para criar sua estrutura dinamicamente, portanto a estrutura atual deve ser a estrutura mais original da seguinte forma:

A única modificação que fiz foi adicionar um ID diferente a cada caixa, o que deixa um gancho para a folha de estilos chamar para criar cores diferentes posteriormente. Use esse ID para criar diferentes imagens ou estilos de cores na folha de estilos.

Precisamos apenas adicionar uma class="box" ao contêiner div, e o layout de grade de nove quadrados será criado com sucesso. Isso é bastante simples!

Camada de estilo:

Agora mesmo enterramos o ponto inovador de personalizar o estilo (o ID diferente) na camada de estrutura, para que fique mais fácil escrever o estilo. Substituímos e redefinimos os estilos de todos os nove locais onde o estilo precisa ser alterado para obter estilos diferentes.

Claro, você pode aplicar imagens diferentes ao fundo como plano de fundo. Acabei de chamar o valor da cor para facilitar a demonstração. O estilo de interface específico depende de suas habilidades de design.

/*Esquema de cores um*/
#one .t_l{fundo:azul;}
#one .t_r{fundo:azul;}
#one .t_m{fundo:laranja;}
#one .m_l{fundo:laranja;}
#one .m_r{fundo:laranja;}
#one .b_l{fundo:azul;}
#one .b_r{fundo:azul;}
#one .b_m span{background:orange;}
#one .context{background:#666;}

/*Esquema de cores dois*/
#dois .t_l{fundo:vermelho;}
#dois .t_r{fundo:vermelho;}
#dois .t_m{fundo:preto;}
#dois .m_l{fundo:preto;}
#dois .m_r{fundo:preto;}
#dois .b_l{fundo:vermelho;}
#dois .b_r{fundo:vermelho;}
#dois .b_m span{fundo:preto;}
#dois .context{plano de fundo:#999;}