Agencement de site web CSS
- Page précédente Compteurs CSS
- Page suivante Unités CSS
Website layout
Websites are usually divided into header, menu, content, and footer:
There are many different layout designs to choose from. However, the above structure is one of the most common structures, and we will study it carefully in this tutorial.
Header
The header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:
Exemple
.header { background-color: #F1F1F1; text-align: center; padding: 20px; }
Résultat :
Navigation bar
The navigation bar contains a list of links to help visitors browse your website:
Exemple
/* Navbar container */ .topnav { overflow: hidden; background-color: #333; } /* Navbar link */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* Link - changes color on hover */ .topnav a:hover { background-color: #ddd; color: black; }
Résultat :
Content
The layout to use usually depends on your target users. The most common layouts are one of the following (or a combination of them):
- 1-colonneMise en page (généralement utilisée pour les navigateurs mobiles)
- 2-colonnesMise en page (généralement utilisée pour les tablettes et les ordinateurs portables)
- 3-colonnesMise en page (seulement pour les ordinateurs de bureau)
1-colonne :
2-colonnes :
3-colonnes :
Nous allons créer un layout à trois colonnes et le modifier en un layout à une colonne sur les écrans plus petits :
Exemple
/* Créez trois colonnes égales qui flottent côte à côte */ .column { float: left; width: 33.33%; } /* Nettoyez le flottement après les colonnes */ .row:after { content: ""; display: table; clear: both; } /* Mise en page responsive - Faites empiler les trois colonnes au lieu de les aligner côte à côte sur les écrans plus petits (largeur de 600 pixels ou moins) */ @media screen and (max-width: 600px) { .column { width: 100%; } }
Résultat :
Manuel de référence complet des technologies de site web
Notre manuel de référence couvre tous les aspects des technologies de site web.
Il inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies, telles que JavaScript, PHP, SQL, etc.
Outil de test d'instance en ligne
Sur CodeW3C.com, nous proposons plus de mille exemples.
En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.
Méthode d'apprentissage rapide et facile
Un temps est un argent que l'on ne peut pas acheter, c'est pourquoi nous vous offrons du contenu d'apprentissage rapide et facile à comprendre.
Ici, vous pouvez obtenir toute l'information dont vous avez besoin de manière claire et accessible.
Astuce :Pour créer un layout à deux colonnes, changez la largeur à 50 %. Pour créer un layout à quatre colonnes, utilisez 25 %.
Astuce :Voulez-vous savoir comment fonctionne la règle @media ? Lisez notre Requêtes médiatiques CSS Apprenez plus de connaissances connexes dans ce chapitre.
Astuce :Une méthode plus moderne pour créer une mise en page de colonnes est d'utiliser CSS Flexbox. Cependant, Internet Explorer 10 et les versions antérieures ne le prennent pas en charge. Si vous avez besoin de la prise en charge d'IE6-10, utilisez les flottants (comme indiqué ci-dessus).
Pour en savoir plus sur le module de mise en page Flexible Box, lisez notre Flexbox CSS Tutoriel.
Colonnes inégales
Le contenu principal (main content) est la partie la plus grande et la plus importante de votre site web.
Il est courant que les largeurs des colonnes ne soient pas égales, car la plupart de l'espace est réservé au contenu principal. Le contenu secondaire (le cas échéant) est généralement utilisé comme navigation de remplacement ou pour spécifier des informations liées au contenu principal. Vous pouvez modifier la largeur à votre guise, à condition de vous souvenir que son total doit être de 100% :
Exemple
.column { float: left; } /* Colonnes latérales */ .column.side { width: 25%; } /* Colonne centrale */ .column.middle { width: 50%; } /* Mise en page responsive - Faites empiler les trois colonnes au lieu de les aligner côte à côte */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }
Résultat :
Manuel de référence complet des technologies de site web
Notre manuel de référence couvre tous les aspects des technologies de site web.
Il inclut les technologies standards W3C : HTML, CSS, XML. Et d'autres technologies, telles que JavaScript, PHP, SQL, etc.
Outil de test d'instance en ligne
Sur CodeW3C.com, nous proposons plus de mille exemples.
En utilisant notre éditeur en ligne, vous pouvez modifier ces exemples et expérimenter avec le code.
Méthode d'apprentissage rapide et facile
Un temps est un argent que l'on ne peut pas acheter, c'est pourquoi nous vous offrons du contenu d'apprentissage rapide et facile à comprendre.
Ici, vous pouvez obtenir toute l'information dont vous avez besoin de manière claire et accessible.
Pied de page
Le pied de page est situé en bas de la page. Il contient généralement des informations telles que les droits d'auteur et les coordonnées de contact :
Exemple
.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }
Résultat :
Mise en page de site web réactif
En utilisant le code CSS ci-dessus, nous avons créé une mise en page de site web adaptative qui bascule entre deux colonnes et une colonne pleine largeur en fonction de la largeur de l'écran :
- Page précédente Compteurs CSS
- Page suivante Unités CSS