La cuadrícula de nueve cuadrados es un diseño relativamente antiguo. Su rendimiento más básico es en realidad como una tabla con tres filas y tres columnas. De hecho, originalmente se usaba más en la estructura C/S de la ventana. Por ejemplo, a menudo vemos un formulario en el software, que en realidad es una aplicación típica de una cuadrícula de nueve cuadrados. en ocho direcciones, por lo que esta tecnología se usa ampliamente en el software C/S para el diseño de diseños. En la sociedad actual, donde los sistemas B/S son populares, algunos diseñadores web utilizan gradualmente este diseño en las páginas web. El más utilizado es el diseño de cuadro de esquinas redondeadas.
La siguiente figura demuestra el diseño básico de Nine Palace Grid:
Como se puede ver en la imagen de arriba, cada fila incluye tres columnas, donde el cuadrado azul es la esquina superior, estos cuatro bloques son áreas con ancho y alto fijos y las cuatro áreas amarillas son los cuatro lados, que deben ser horizontales. o en mosaico vertical, mientras que el área naranja en el medio es el área principal para cargar contenido.
Este tipo de estructura es más propicio para la expansión automática del ancho y alto del área de contenido de acuerdo con diferentes resoluciones de pantalla. Este tipo de estructura es también la estructura de diseño que más desean los diseñadores web.
Implementémoslo a continuación:
Capa estructural :
Debido a que tiene que adaptarse al estiramiento en ocho direcciones, cada dirección se implementa con un div. Si falta uno, la flexibilidad será insuficiente. Entonces, de acuerdo con este principio, podemos obtener la siguiente estructura:
Capa de estilo :
Según la estructura, podemos escribir el estilo básico. El principio de implementación básico es establecer el contenedor.box total en posicionamiento relativo y configurar overflow:hidden para que todas las áreas más allá de él queden cortadas, y los divs en las ocho direcciones dentro de él se establezcan en posicionamiento absoluto, y su z - El índice se establece en 2 y luego los cuatro contenedores de las esquinas se establecen en las cuatro esquinas respectivamente.
.box{desbordamiento:oculto;posición:relativa;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {posición:absoluta;índice z:2;}