Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML. Si vous souhaitez parcourir le tutoriel CSS, veuillez cliquer ici.
Ci-dessus: Langue de balisage - Remplacement d'image . Chapitre 15 Spécifiez un style pour <body>
L'un des avantages de la définition du contenu et des effets d'affichage séparément est la flexibilité. En utilisant CSS pour contrôler la disposition du site Web (la méthode utilisée au chapitre 12), vous pouvez contrôler les éléments de conception de l'ensemble du site Web, modifier quelques règles et mettre à jour immédiatement des milliers de pages.
L'un des exemples de commodité de l'utilisation de CSS pour contrôler la mise en page est de spécifier un style pour <body>, et en ajoutant des balises de classe ou d'identification à <body>, vous pouvez personnaliser toutes les balises sur la page. Il n'y a aucun problème de définitions répétées.
Dans ce chapitre, nous explorerons comment utiliser une structure de balise pour changer deux configurations de disposition différentes en ajoutant une classe à la balise <body>. Disposages à deux colonnes ou à trois colonnes.
Tout comme lors de la refonte d'un site Web pour une entreprise rapide à l'aide de la technologie de mise en page CSS, l'un des défis est: bien que toutes les pages partagent la même navigation et la fin de la page, deux dispositions différentes sont également nécessaires.
La première mise en page est la page d'index (page d'accueil), voir la figure 15-1. Il s'agit d'une page avec une fonction de navigation, permettant aux utilisateurs de continuer à pénétrer la structure du répertoire du site Web. Nous avons décidé d'utiliser une disposition à trois colonnes pour ces pages.
Figure 15-1 Démonstration de la page d'index à trois colonnes de Fast Company
La deuxième mise en page de la page est la page interne Figure 15-2. Toute page qui ressemble à la destination utilise cette mise en page. Afin d'améliorer la lisibilité, nous avons décidé d'omettre la colonne de gauche et de laisser deux colonnes, c'est-à-dire une grande colonne place du contenu et l'autre met des publicités.
Figure 15-2 démonstration de la page de texte à deux colonnes de Fast Company.
La raison pour laquelle j'explique cela n'est pas de prouver que nous avons craqué le grand mystère d'une certaine disposition, mais pour démontrer que l'ajout de classe à la balise <body> peut ajuster la largeur de la colonne et placer ou omettre la troisième colonne en fonction de la forme de la page. Lors de la création d'un tel effet, aucune règle n'est répétée du tout et aucune feuille de style supplémentaire n'est introduite. Des marques et des structures de style sont ajoutées.
Après avoir commencé à décrire la structure de marquage partagée par les deux pages, ces récits commenceront à avoir un sens. Afin d'atteindre la disposition de la colonne, la méthode de positionnement absolu mentionnée au chapitre 12 sera utilisée.
La structure de balise simplifiée de la page de texte ressemble à ceci:
<div id = en-tête>
... Informations en tête ici ...
</div>
<div id = contenu>
... Contenu ici ...
</div>
<div id = droite>
... Info à droite de la colonne ...
</div>
<div id = pied de page>
... Infos de pied de page ...
</div>
L'utilisation des règles CSS comme #Content et #Footer plus un correctif droit qui est suffisant pour utiliser la méthode de positionnement absolu à mettre dans #Right. Dans cet exemple, 190 pixels suffisent.
#Content, #Footer {
marge: 10px 190px 10px 10px;
}
Pour les pages d'index, la structure de balisage est exactement la même, il n'est donc pas nécessaire de copier une règle CSS partagée, mais un <div> supplémentaire est ajouté à la gauche de #Content comme troisième colonne (#Left).
<div id = en-tête>
... Informations en tête ici ...
</div>
<div id = contenu>
... Contenu ici ...
</div>
<div id = gauche> ... Informations sur la colonne de gauche ... </div> <div id = droite> ... Info à droite de la colonne ... </div><div id = pied de page>
... Infos de pied de page ...
</div>
Pour cette structure à trois colonnes, non seulement nous devrions définir le patch extérieur droit pour #Content et #Footer pour accueillir la colonne de droite, mais nous devons également régler le patch extérieur gauche pour accueillir la colonne gauche nouvellement ajoutée.
Cependant, le patch extérieur gauche a été défini sur 10 pixels pour correspondre à la disposition de la page de texte prédéfini qui n'a que des colonnes doubles.
Wow, nous sommes coincés, comment devons-nous continuer? Veuillez continuer à lire.
Page précédente 1 2 3 Page suivante Lire le texte intégral