puis laissé flottant. Étant donné que la largeur du
externe est spécifiée, les quatre cases sont disposées sur deux lignes. La première ligne est une bordure verte et la deuxième ligne est une bordure bleue. Lors de l'écriture du style de bordure, les couleurs de ce qui précède. deux sont les principaux. Les deux autres sont réécrits dans des styles en ligne. Le contenu de la bordure est remplacé par la liste. La première ligne de la liste est le titre. Vous devez appliquer le style de titre, puis le faire flotter vers la gauche. L'effet est meilleur que celui d'origine. La deuxième ligne de la liste doit également définir clear:right; afin que les trois lignes restantes ne flottent pas.
J'ai rencontré des problèmes inexplicables lors du processus de modification, et je voudrais les expliquer en particulier :
Les parties gauche et droite sont toujours mal alignées
Voici le style initial de la partie gauche :
#mainleft1 ul {
taille de police : 10px;
}
#mainleft1 li {
hauteur de ligne : 24px;
}
Lors de la prévisualisation dans ce style, différents navigateurs affichent différents effets,
Plus tard, j'ai changé le style pour résoudre le problème :
#mainleft1 li {
taille de police : 10px;
}
#mainleft1 a {
hauteur de ligne:24px;
}
Il semble que les fonctions implémentées par ces deux styles soient les mêmes. Mais l'effet est différent, c'est peut-être un problème avec le style par défaut !
Bogue IE
Ce problème est vraiment déroutant. Jetez un œil à l'effet : 
Regardez attentivement les quatre mots supplémentaires, vous serez surpris. Il n'y a aucun problème dans les autres navigateurs. Si la distance entre les quatre cases est plus petite, il n'y aura finalement aucun problème, je n'ai pas d'autre choix que de définir overflow:hidden pour le masquer.
À ce stade, le traitement de la partie médiane est terminé.
La troisième étape du traitement de la queue
Après avoir modifié les deux premières parties, cette partie sera beaucoup plus simple. Créez un #bot1, appliquez-le une fois à chaque case, puis appliquez plusieurs listes non ordonnées. .Maquillez le look de base. Le problème rencontré dans cette partie est le suivant : le lien ne peut pas être aligné à gauche et text-align: left; ne peut pas être spécifié. En fin de compte, je dois définir des limites et un remplissage différents pour chaque ligne pour obtenir l'effet d'alignement.
De cette façon, le tout est pratiquement terminé. Le travail restant consiste à ajuster soigneusement l’alignement des bordures et l’espace blanc de chaque partie. L'ensemble du projet m'a pris trois jours, deux jours pour terminer les tâches de base et le dernier jour pour effectuer des ajustements détaillés. La taille finale du document est de 48,8 Ko, soit 30 Ko de moins que la taille d'origine
Le fichier source final complété peut être trouvé sur mon site Web, cliquez pour parcourir.
Dernière modification 2005-10-13
Modifié le 28 octobre 2005, correction de l'affichage anormal dans IE .
