En las tres series de artículos anteriores, ofrecí una introducción detallada al diseño de cuadrícula de nueve cuadrados. Comencemos con un diseño básico y expliquemos uno por uno los problemas encontrados durante el proceso de producción. Estos tres artículos son explicaciones de principios básicos. No existe ningún caso de aplicación poderoso que demuestre si este principio es correcto. Algunos amigos pueden estar un poco impacientes y algunos internautas me han pedido que les proporcione casos. Por lo tanto, en este artículo presentaré un caso de Jiugongge, un jugador genial.
En mi tercer artículo, "La cuadrícula perfecta de nueve gongs con tres capas de separación", presenté el uso de JS para encapsular etiquetas html para reducir estructuras redundantes, pero este método también tiene fallas. Si el usuario deshabilita JS, esto hará que la estructura. Por supuesto, para las condiciones actuales de Internet, esto no debería ser un gran problema, pero al observar algunos diseños de páginas web extranjeras, esta consideración es necesaria. Esto requiere una degradación elegante y un debilitamiento funcional, pero el resultado es el mismo que si no se utilizara la encapsulación JS. Por lo tanto, no puedes quedarte con tu pastel y comértelo también. Oye, todas estas son digresiones, ¡echemos un vistazo a cómo está diseñado uno de nuestros geniales reproductores!
Las primeras impresiones son lo primero, todo el mundo quiere ver los resultados primero, está bien, mostremos primero las capturas de pantalla:
Figura 1
Generalmente, para un jugador tan colorido, los valores de ancho y alto deben ajustarse dinámicamente, por lo que es una opción muy adecuada utilizar una cuadrícula de nueve cuadrados para dichos gráficos.
Por supuesto, no repetiré el principio. Consulte el " Diseño de cuadrícula irrompible de nueve gongs " en mi serie de artículos. Por supuesto, todavía existen algunas técnicas en producción que pueden ayudarnos a completar mejor la tarea. Por ejemplo, la tecnología CSS Sprites (puede consultar mi otro artículo " Tecnología de optimización de fondo de imágenes CSS Sprites ") puede reducir beneficiosamente la cantidad de solicitudes de imágenes. En términos generales, para aplicaciones con diseño de cuadrícula de nueve cuadrados, hay más imágenes, porque. Se necesitan al menos ocho dibujos para decorar las cuatro esquinas y los cuatro lados. Por lo tanto, cómo reducir la cantidad de imágenes es algo que los diseñadores deben considerar.
En este ejemplo fusioné las cuatro imágenes de las esquinas en una sola, por lo que deberían verse así:
Figura 2
En la imagen de arriba, para que todos vean con más atención, dibujé las uniones de varias imágenes con líneas auxiliares. Aplicamos el principio de posicionamiento de las imágenes para fijarlas en las cuatro esquinas. Se definen en la hoja de estilo de la siguiente manera:
.t_l{ fondo:url(../image/round.gif) no repetir arriba a la izquierda;}
/*esquina superior izquierda*/
.t_r{fondo:url(../image/round.gif) no repetir arriba derecha;}
/*esquina superior derecha*/
.b_l{fondo:url(../image/round.gif) no repetir abajo izquierda;}
/*esquina inferior izquierda*/
.b_r{ fondo:url(../image/round.gif) no repetir abajo derecho;}
/*Esquina inferior derecha*/