Dans mon précédent tutoriel « Disposition de base de neuf palais », j'ai présenté la méthode d'utilisation du positionnement relatif et du positionnement absolu pour créer la disposition de base de neuf palais. Il s'agit d'une méthode plus conforme à la pensée inertielle des gens. Il semble que tout dans le processus de production soit une évidence. Cependant, en raison du BUG de parité dégoûtant d'IE6, cette mise en page est devenue un peu hors de portée. méthode universelle, car la plupart des utilisateurs nationaux utilisent encore IE6, et nous ne pouvons pas perdre ces utilisateurs à cause de cela.
Il n’existe actuellement aucun remède à ce BUG, et aucun hack ne peut être utilisé. La seule façon de l’utiliser est de le contourner. En d'autres termes, je souhaite localiser les quatre conteneurs de coin de la grille à neuf carrés. La méthode de positionnement absolu ne peut pas être utilisée. C'est un coup dur, cela va complètement bouleverser la méthode utilisée dans mon article précédent. de nouveau.
Alors, quelles autres technologies peuvent sauver ce BUG d’une situation désespérée ? Nous savons que si vous utilisez la méthode flottante gauche et droite, vous pouvez décaler avec précision l'objet élément, et cette méthode peut également éviter le BUG de parité d'IE6. OK, utilisons-le.
Points clés et difficultés de mise en page
Nous construisons toujours la structure de notre nouveau modèle en fonction de la structure du tableau, mais cette fois elle sera différente de la structure de l'article précédent. Les points clés et les difficultés auxquels nous devons prêter attention dans ce modèle sont les deux points suivants :
1. Les valeurs de largeur des deux conteneurs intermédiaires t_m et b_m doivent être une valeur en pourcentage, sinon l'expansion dynamique gauche et droite de l'ensemble de la grille de neuf carrés ne peut pas être garantie et il ne doit pas s'agir d'une valeur de pixel fixe. Sa largeur est égale à la largeur totale du conteneur moins la somme des largeurs des deux conteneurs d'angle en pourcentage. La formule de calcul est :
La largeur de t_m (ou b_m) = (largeur totale du conteneur - (largeur du conteneur du coin supérieur gauche + largeur du conteneur du coin supérieur droit)) / largeur totale du conteneur
C'est-à-dire que la largeur de t_m ou b_m n'est pas de 100 %. Cependant, la largeur des deux conteneurs t_l et t_r est généralement la largeur d'une image dans les cas réels, il s'agit donc généralement d'une valeur de largeur fixe, de sorte que dans les trois mêmes Dans un conteneur, la largeur des côtés gauche et droit est une valeur fixe, mais celle du milieu nécessite un pourcentage, et la largeur totale de ces trois conteneurs doit totaliser 100 %.
Ici, nous utilisons une méthode relativement sûre pour que le conteneur du milieu atteigne le pourcentage de largeur idéal :
Nous pouvons utiliser un conteneur DIV et définir son remplissage : 0 10px ; ne définissez pas sa largeur. Par défaut, sa largeur est de 100 %. Étant donné que les valeurs de remplissage gauche et droite sont définies, la largeur interne est la valeur de largeur idéale de t_m que nous voulons, nous définissons donc un conteneur à l'intérieur et la largeur de ce sous-conteneur est définie sur 100 %. La couleur d'arrière-plan de ce sous-conteneur peut être définie sur une image d'arrière-plan en mosaïque horizontale à gauche et à droite. Ce sous-conteneur est le conteneur supérieur que nous allons utiliser. Il répond à nos exigences particulières en matière de valeurs de largeur.
Par conséquent, la structure de t_m peut être transformée en la structure suivante :
<div class="top"><span class="t_m"></span></div>
Cependant, cette définition posera un autre problème. Ce problème existe dans les navigateurs inférieurs à IE7. Parce que nous définissons le remplissage, il générera également des correctifs internes gauche et droit dans la couche centrale du corps ci-dessous. Oui : pourquoi cela affecte-t-il. IE7 ?
Le remède consiste donc à utiliser une astuce HACK ici pour IE6 et IE7 :
.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
Cette phrase définit différentes valeurs de décalage pour trois navigateurs et décale b_l et b_r vers la gauche et la droite jusqu'à la position spécifiée.
2. Les valeurs de hauteur des deux conteneurs b_l et b_r doivent être les mêmes pour qu'ils puissent mosaïquer la couleur d'arrière-plan verticalement vers le bas. De cette façon, lorsque la hauteur du contenu dans la zone de contenu principale centrale (contexte) change, la couleur d'arrière-plan des deux côtés peut toujours conserver la même hauteur que la zone de contenu principale (contexte). C'est-à-dire qu'ils peuvent librement étendre leur hauteur en fonction de la hauteur du corps du contenu.
Nous pouvons utiliser la méthode de plusieurs colonnes de même hauteur, souvent utilisée dans le travail quotidien, pour résoudre ce problème. Cette méthode utilise une combinaison de patchs internes et de patchs externes négatifs pour obtenir la même hauteur pour plusieurs colonnes :
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
Nous définissons la valeur de remplissage inférieure du patch interne inférieur de m_l et m_r sur une valeur relativement grande. Par exemple, je les ai définis sur 30 000 pixels (vous pouvez la définir sur la valeur que vous souhaitez). ne pas dépasser cette valeur de hauteur. Ensuite, définissez le patch extérieur inférieur (marge-bas) sur la même valeur négative que la valeur du patch intérieur inférieur (padding-bottom), ramenez-le à sa position d'origine et définissez le conteneur total (boîte) sur overflow:hidden;, Coupez l'excédent de hauteur pour vous assurer que les deux colonnes ont la même hauteur.
Après avoir résolu les deux problèmes difficiles ci-dessus, le reste est simple et agréable ! [Page coupée]
couche structurelle
Nous avons maintenant ajusté la couche de structure en fonction du cas précédent, elle devient donc la structure suivante :
Voici le contenu cité : <div classe="boîte"> <!--Deuxième ligne—zone de contenu centrale*/--> <!--Troisième ligne—en bas*/--> |
calque de style
Voici les principaux paramètres de style :
Voici le contenu cité : /*Conteneur total*/ .box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;} /*Style supérieur*/ /*Style intermédiaire*/ /*Style du bas*/ |
Vous pouvez utiliser huit images pour créer une magnifique boîte quadrillée de neuf carrés. Regardez comme c'est parfait.
Ce modèle a été testé dans les navigateurs suivants :
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
Voici le contenu cité : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Lien vers cet article : http://www.blueidea.com/tech/web/2009/6805.asp