Mise en page du site Web CSS
Mise en page du site Web
Un site Web est souvent divisé en en-têtes, menus, contenu et pied de page :
Contenu principal
Il existe des tonnes de conceptions de mise en page différentes parmi lesquelles choisir. Cependant, la structure ci-dessus est l’une des plus courantes et nous l’examinerons de plus près dans ce didacticiel.
Entête
Un en-tête est généralement situé en haut du site Web (ou juste en dessous d’un menu de navigation supérieur). Il contient souvent un logo ou le nom du site :
Exemple
.entête {
couleur de fond : #F1F1F1 ;
aligner le texte : centrer ;
rembourrage : 20px ;
}
Résultat
Essayez-le vous-même »
Barre de navigation
Une barre de navigation contient une liste de liens pour aider les visiteurs à naviguer sur votre site Web :
Exemple
/* Le conteneur de la barre de navigation */
.topnav {
débordement caché;
couleur de fond : #333 ;
}
/* Liens de la barre de navigation */
.topnav un {
flotteur : gauche ;
bloc de visualisation;
couleur : #f2f2f2 ;
aligner le texte : centrer ;
rembourrage : 14px 16px ;
décoration de texte : aucune ;
}
/* Liens – changer de couleur au survol */
.topnav a:hover {
couleur d’arrière-plan : #ddd ;
la couleur noire;
}
Résultat
Essayez-le vous-même »
Contenu
La mise en page de cette section dépend souvent des utilisateurs cibles. La mise en page la plus courante est l’une (ou une combinaison de celles-ci) des suivantes :
- 1 colonne (souvent utilisé pour les navigateurs mobiles)
- 2 colonnes (souvent utilisé pour les tablettes et les ordinateurs portables)
- Mise en page à 3 colonnes (uniquement utilisé pour les ordinateurs de bureau)
Nous allons créer une mise en page à 3 colonnes et la remplacer par une mise en page à 1 colonne sur des écrans plus petits :
Exemple
/* Crée trois colonnes égales qui flottent les unes à côté des autres */
.colonne {
flotteur : gauche ;
largeur : 33,33 % ;
}
/* Effacer les flottants après les colonnes */
.ligne : après {
contenu: “”;
affichage : tableau ;
clarifier les deux;
}
/* Mise en page réactive – permet aux trois colonnes de s’empiler les unes sur les autres au lieu de les côte à côte sur des écrans plus petits (600 pixels de large ou moins) */
Écran @media et (largeur maximale : 600px) {
.colonne {
largeur : 100 % ;
}
}
Résultat
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mécène sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mécène sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mécène sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Essayez-le vous-même »
Conseil: Pour créer une mise en page à 2 colonnes, modifiez la largeur à 50 %. Pour créer une mise en page à 4 colonnes, utilisez 25 %, etc.
Conseil: Vous vous demandez comment fonctionne la règle @media ? En savoir plus à ce sujet dans notre chapitre CSS Media Queries.
Conseil: Une façon plus moderne de créer des dispositions de colonnes consiste à utiliser CSS Flexbox. Cependant, il n’est pas pris en charge dans Internet Explorer 10 et les versions antérieures. Si vous avez besoin d’un support IE6-10, utilisez des flottants (comme indiqué ci-dessus).
Pour en savoir plus sur le module Flexible Box Layout, lisez notre chapitre CSS Flexbox.
Colonnes inégales
Le contenu principal est la partie la plus importante et la plus importante de votre site.
C’est commun avec inégal largeurs de colonne, de sorte que la majeure partie de l’espace soit réservée au contenu principal. Le contenu secondaire (le cas échéant) est souvent utilisé comme navigation alternative ou pour spécifier des informations pertinentes pour le contenu principal. Modifiez les largeurs à votre guise, rappelez-vous seulement qu’elles doivent totaliser 100 % :
Exemple
.colonne {
flotteur : gauche ;
}
/* Colonne de gauche et de droite */
.column.side {
largeur : 25 % ;
}
/* Colonne du milieu */
.column.middle {
largeur : 50 % ;
}
/* Mise en page réactive : les trois colonnes s’empilent les unes sur les autres plutôt que les unes à côté des autres */
Écran @media et (largeur maximale : 600px) {
.column.side, .column.middle {
largeur : 100 % ;
}
}
Résultat
Côté
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Contenu principal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mécène sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Côté
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Essayez-le vous-même »
Bas de page
Le pied de page est placé en bas de votre page. Il contient souvent des informations telles que le droit d’auteur et les coordonnées :
Exemple
.bas de page {
couleur de fond : #F1F1F1 ;
aligner le texte : centrer ;
rembourrage : 10px ;
}
Résultat
Essayez-le vous-même »
Mise en page de site Web réactif
En utilisant une partie du code CSS ci-dessus, nous avons créé une mise en page de site Web réactive, qui varie entre deux colonnes et des colonnes pleine largeur en fonction de la largeur de l’écran :
Essayez-le vous-même »
Jamais entendu parler Espaces Infodewi? Ici, vous pouvez créer votre site Web à partir de zéro ou utiliser un modèle et l’héberger gratuitement.
* Pas de carte de crédit nécessaire
#Mise #page #site #Web #CSS