En mi tutorial anterior " El diseño de cuadrícula irrompible de nueve gongs ", presenté un método de diseño de cuadrícula de nueve cuadrados relativamente perfecto, que puede ajustar de manera totalmente flexible su ancho y alto para lograr un estilo de diseño más flexible.
Sin embargo, para reflejar perfectamente la función elástica, el precio pagado sigue siendo muy alto. Desde un punto de vista estructural, la estructura está relativamente hinchada, pero cada nodo es indispensable y no se puede simplificar, de lo contrario conducirá a su flexibilidad. no es suficiente.
En aplicaciones prácticas, es posible que a muchos diseñadores no les guste esta estructura de diseño y piensen que es redundante.
Un diseño de cuadrícula de nueve cuadrados perfecto debe ser una estructura separada de tres capas. La cuadrícula de nueve cuadrados ideal que quiero lograr debería ser así:
Por lo tanto, en este artículo intentaré acercar este diseño lo más posible a este estado idealizado, haciéndolo más adecuado para su aplicación en varios aspectos.
Respecto al primer y segundo punto, si quieres mantener su flexibilidad y lograr un efecto estilizado, es decir, si quieres "comerte el pastel y comértelo también", no hay otra manera que usar la encapsulación js. Se puede decir que este es un enfoque de "esconder los oídos y robar la campana". Sí, debo admitir que este método de encapsulación con JS no simplifica su estructura en esencia, sino que solo utiliza una forma dinámica de encapsularla. estructura Create, pero tiene un efecto inmediato en las estructuras html redundantes, y todas las estructuras redundantes son invisibles de una sola vez.
Aprendamos cómo mejorar nuestra cuadrícula de nueve cuadrados desde el enfoque de separación de tres capas.
Capa estructural :
Esta es el área clave que queremos optimizar tanto como sea posible. Usamos js para crear dinámicamente su estructura, por lo que la estructura actual debe ser la estructura más original de la siguiente manera:
<div class="box">El primer cuadro de nueve cuadrados</div>
<div class="box" id="one">El segundo cuadro de nueve cuadrados</div>
<div class="box" id="two">El tercer cuadro de nueve cuadrados</div>
La única modificación que hice fue agregar una identificación diferente a cada cuadro, lo que deja un gancho para que la hoja de estilo lo llame para crear diferentes colores más adelante. Utilice esta ID para crear diferentes imágenes o estilos de color en la hoja de estilos.
Sólo deberíamos necesitar agregar un class="box" al contenedor div, y el diseño de cuadrícula de nueve cuadrados se creará exitosamente. ¡Esto es bastante simple!
Capa de estilo:
Justo ahora hemos enterrado el punto decisivo de personalizar el estilo (los ID diferentes) en la capa de estructura, para que sea más fácil escribir el estilo. Anulamos y restablecemos los estilos de los nueve lugares donde es necesario cambiar el estilo para obtener estilos diferentes.
Por supuesto, puede aplicar diferentes imágenes al fondo como fondo. Acabo de llamar al valor de color para facilitar la demostración. El estilo de interfaz específico depende de sus habilidades de diseño.
/*Esquema de colores uno*/
#uno .t_l{fondo:azul;}
#uno .t_r{fondo:azul;}
#uno .t_m{fondo:naranja;}
#uno .m_l{fondo:naranja;}
#uno .m_r{fondo:naranja;}
#uno .b_l{fondo:azul;}
#uno .b_r{fondo:azul;}
#un intervalo .b_m{fondo:naranja;}
#uno .context{fondo:#666;}
/*Esquema de colores dos*/
#dos .t_l{fondo:rojo;}
#dos .t_r{fondo:rojo;}
#dos .t_m{fondo:negro;}
#dos .m_l{fondo:negro;}
#dos .m_r{fondo:negro;}
#dos .b_l{fondo:rojo;}
#dos .b_r{fondo:rojo;}
#dos .b_m span{fondo:negro;}
#dos .context{fondo:#999;}