A grade de nove quadrados é um design relativamente antigo. Seu desempenho mais básico é, na verdade, como uma tabela com três linhas e três colunas. Na verdade, foi originalmente usado mais na estrutura C/S da janela. Por exemplo, muitas vezes vemos um formulário no software, que é na verdade uma aplicação típica de uma grade de nove quadrados. em oito direções, portanto, em Esta tecnologia é amplamente utilizada em software C/S para design de layout. Na sociedade atual, onde os sistemas B/S são populares, esse layout é gradualmente usado por alguns web designers em páginas da web. O mais comumente usado é o layout de caixa de canto arredondado.
A figura a seguir demonstra o layout básico da Grade dos Nove Palácios:
Como pode ser visto na imagem acima, cada linha inclui três colunas, onde o quadrado azul é o canto superior, esses quatro blocos são áreas com largura e altura fixas, e as quatro áreas amarelas são os quatro lados, que devem ser horizontais. ou lado a lado vertical, enquanto a área laranja no meio é a área principal para carregamento de conteúdo.
Este tipo de estrutura é mais propício à expansão automática da largura e altura da área de conteúdo de acordo com as diferentes resoluções de tela. Esse tipo de estrutura também é a estrutura de layout que os web designers mais desejam.
Vamos implementá-lo abaixo:
Camada estrutural :
Por ter que se adaptar ao alongamento em oito direções, cada direção é implementada com um div. Se faltar um, a flexibilidade será insuficiente. Então, de acordo com este princípio, podemos obter a seguinte estrutura:
Camada de estilo :
De acordo com a estrutura, podemos escrever o estilo básico. O princípio básico de implementação é definir o container.box total para posicionamento relativo e definir overflow:hidden para que todas as áreas além dele sejam cortadas e os divs nas oito direções dentro dele sejam definidos para posicionamento absoluto, e seus z - O índice é definido como 2 e, em seguida, os quatro contêineres de canto são definidos como os quatro cantos, respectivamente.
.box{overflow:oculto;posição:relativo;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {posição:absoluta;índice z:2;}