Dans les trois séries d’articles précédentes, j’ai donné une introduction détaillée à la disposition en grille à neuf carrés. Commençons par une présentation de base et expliquons un par un les problèmes rencontrés lors du processus de production. Ces trois articles sont tous des explications de principes de base. Il n'existe aucun cas d'application puissant pour prouver si ce principe est correct. Certains amis peuvent être un peu impatients, et certains internautes m'ont demandé de fournir des cas. Par conséquent, dans cet article, je présenterai un cas de Jiugongge – un joueur très cool.
Dans mon troisième article "La grille parfaite à neuf gongs avec trois couches de séparation", j'ai présenté l'utilisation de JS pour encapsuler les balises HTML afin de réduire les structures redondantes, mais cette méthode est également défectueuse. Si l'utilisateur désactive JS, cela entraînera la structure. ne s'affichera pas du tout. Bien sûr, dans les conditions Internet actuelles, cela ne devrait pas poser de gros problème, mais en regardant certaines conceptions de pages Web étrangères, cette considération est nécessaire. Cela nécessite une rétrogradation gracieuse et un affaiblissement fonctionnel, mais le résultat est le même que ne pas utiliser l'encapsulation JS. Par conséquent, vous ne pouvez pas avoir le gâteau et le manger en même temps. Hé, ce ne sont que des digressions, jetons un coup d'œil à la façon dont l'un de nos lecteurs sympas est conçu !
Les premières impressions passent en premier, tout le monde veut voir les résultats en premier, d'accord, montrons d'abord les captures d'écran :
Figure 1
Généralement, pour un lecteur aussi coloré, les valeurs de largeur et de hauteur doivent être ajustées dynamiquement, c'est donc un choix très approprié d'utiliser une grille de neuf carrés pour de tels graphiques.
Bien sûr, je ne réitérerai pas le principe. Veuillez vous référer au « Disposition de la grille incassable à neuf gongs » dans ma série d'articles. Ce cas d'application est basé sur celui-ci. Bien sûr, il existe encore certaines techniques de production qui peuvent nous aider à mieux accomplir la tâche. Par exemple, la technologie des sprites CSS (vous pouvez consulter mon autre article « Technologie d'optimisation de l'arrière-plan des images de sprites CSS ») peut réduire avantageusement le nombre de demandes d'images. De manière générale, pour les applications avec une disposition en grille à neuf carrés, il y a plus d'images, car. Il faut au moins huit images pour décorer les quatre coins et les quatre côtés. Par conséquent, les concepteurs doivent réfléchir à la manière de réduire le nombre d’images.
Dans cet exemple, j'ai fusionné les quatre images de coin en une seule image, elles devraient donc ressembler à ceci :
Figure 2
Dans l'image ci-dessus, afin que tout le monde puisse voir plus attentivement, j'ai dessiné les jonctions de plusieurs images avec des lignes auxiliaires. Nous avons appliqué le principe du positionnement des images pour les fixer aux quatre coins. Ils sont définis dans la feuille de style comme suit :
.t_l{ background:url(../image/round.gif) sans répétition en haut à gauche ;}
/*coin supérieur gauche*/
.t_r{background:url(../image/round.gif) sans répétition en haut à droite ;}
/*coin supérieur droit*/
.b_l{background:url(../image/round.gif) sans répétition en bas à gauche ;}
/*coin inférieur gauche*/
.b_r{ background:url(../image/round.gif) sans répétition en bas à droite ;}
/*Coin inférieur droit*/