CSS Mise en page du site Web
Mise en page du site Web CSS
Un site Web est souvent divisé en plusieurs sections, comme un en-tête supérieur, un menu de navigation, un contenu principal et un pied de page :
Il existe de nombreuses conceptions de mise en page différentes parmi lesquelles choisir. Cependant, la structure ci-dessus est l'une des plus courantes, et nous allons l'examiner de plus près dans ce tutoriel.
En-tête CSS
Un en-tête est généralement situé en haut du site Web et contient souvent un logo ou le nom du site :
Exemple
header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
} Résultat
Mon En-tête
Barre de navigation CSS
Une barre de navigation contient une liste de liens pour aider les visiteurs à naviguer sur votre site :
Exemple
/* Style de la topnav */
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
/* Style des liens dans la topnav */
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}
/* Changer la couleur au survol */
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
} Résultat
Contenu de mise en page CSS
La façon dont le contenu d'un site Web doit être affiché dépend souvent de l'appareil utilisé par les visiteurs. Les mises en page les plus courantes sont :
- Mise en page à 1 colonne (souvent utilisée pour les navigateurs mobiles)
- Mise en page à 2 colonnes (souvent utilisée pour les tablettes et les ordinateurs portables)
- Mise en page à 3 colonnes (utilisée uniquement pour les ordinateurs de bureau)
1-colonne :
2-colonnes :
3-colonnes :
Ici, nous allons créer une mise en page à 3 colonnes et la transformer en une mise en page à 1 colonne lorsque la largeur de l'écran est inférieure à 600px :
Exemple
div.flex-container {
display: flex;
/* Afficher les éléments flex horizontalement */
flex-direction: row;
}
div.flex-container > div {
margin: 10px;
}
/* Utiliser une requête média et afficher les éléments flex verticalement si la largeur de l'écran est inférieure à 600px */
@media screen and (max-width:600px) {
div.flex-container {
flex-direction: column;
}
} Résultat
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Colonne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Astuce : En savoir plus sur la règle CSS @media dans notre chapitre CSS Media Queries .
Astuce : En savoir plus sur CSS Flexbox dans notre chapitre CSS Flexbox .
Pied de page CSS de base et fixe
Le pied de page est placé en bas d'une page Web. Il contient souvent des informations comme le copyright et les coordonnées.
L'exemple suivant montre un style de pied de page de base :
Exemple
footer {
background-color: #f1f1f1;
text-align: center;
padding: 8px;
} Résultat
L'exemple suivant montre un pied de page fixe qui est toujours visible en bas de la page, peu importe le défilement :
Exemple
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
} Site Web CSS réactif
Dans cet exemple, nous utilisons des requêtes média avec flexbox pour créer un site Web réactif, contenant une barre de navigation flexible et un contenu adaptable.
Exemple
Avez-vous déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre site Web à partir de zéro ou utiliser un modèle.
* aucune carte de crédit requise