Mise en page Web CSS

Mise en page Web

Il existe de nombreuses façons de mettre en page des pages web, généralement divisées en parties suivantes :Zone d'en-tête, zone de navigation du menu, zone de contenu, zone de pied de page。

Zone d'en-tête

La zone d'en-tête se trouve en haut de l'ensemble de la page web et sert généralement à définir le titre ou le logo de la page web :

Exemples CSS3

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

Essayez-le vous-même »

Zone de navigation du menu

La barre de navigation du menu contient des liens qui peuvent guider les utilisateurs à parcourir d'autres pages :

Exemples CSS3

/*Barre de navigation*/ .topnav { overflow: hidden; background-color: #333; } /*Liens de navigation*/ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*Liens - Changer la couleur*/ .topnav a:hover { background-color: #ddd; color: black; }

Essayez-le vous-même »

Zone de contenu

La zone de contenu comporte généralement trois formes :

  • 1 colonne: généralement utilisée pour les appareils mobiles
  • 2 colonnes: généralement utilisées pour les tablettes
  • 3 colonnes: généralement utilisées pour les PC de bureau

Nous allons créer une mise en page à 3 colonnes qui deviendra une mise en page à 1 colonne sur les petits écrans (responsive) :

Exemples CSS3

/*Créez trois colonnes égales*/ .column { float: left; width: 33.33%; } /*Effacer les flottants après les colonnes*/ .row:after { content: ""; display: table; clear: both; } /*Mise en page responsive - passer à une mise en page verticale en dessous de 600 px*/ @media screen and (max-width: 600px) { .column { width: 100%; } }

Essayez-le vous-même »

Astuce :Pour définir deux colonnes, vous pouvez définir width sur 50%. Pour créer 4 colonnes, vous pouvez définir width sur 25%.

Astuce :Si vous voulez en savoir plus sur les règles @media, vous pouvez consulterCSS3 Media Queries。

Astuce :Une méthode plus avancée consiste désormais à utiliser CSS Flexbox pour créer des dispositions en colonnes, mais Internet Explorer 10 et les versions antérieures ne prennent pas en charge cette méthode. IE6-10 peuvent utiliser la méthode float.

Pour plus de contenu sur CSS Flexbox, vous pouvez consulterCSS3 Flexible Box (Flex Box)。

Colonnes inégales

Pour des colonnes inégales, la zone de contenu est généralement définie dans la partie centrale, qui est aussi la partie la plus grande et la plus importante. Les côtés gauche et droit peuvent être utilisés pour la navigation et d'autres contenus associés. La largeur totale de ces trois colonnes est de 100%.

Exemples CSS3

.column { float: left; } /*Largeurs des barres latérales gauche et droite*/ .column.side { width: 25%; } /*Largeur de la colonne centrale*/ .column.middle { width: 50%; } /*Mise en page responsive - définir une disposition verticale lorsque la largeur est inférieure à 600px*/ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }

Essayez-le vous-même »

Zone de pied de page

La zone de pied de page se trouve tout en bas de la page web et contient généralement des informations de copyright, des informations de contact, etc.

Exemples CSS3

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }

Essayez-le vous-même »

Mise en page web responsive

Grâce à ce qui précède, créons une page responsive. La mise en page s'adaptera à la taille de l'écran :

Exemples CSS3

* { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /*Titre de l'en-tête*/ .header { padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /*Barre de navigation*/ .topnav { overflow: hidden; background-color: #333; } /*Liens de la barre de navigation*/ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*Modification de la couleur des liens*/ .topnav a:hover { background-color: #ddd; color: black; } /*Créer deux colonnes*/ /* Colonne de gauche */ .leftcolumn { float: left; width: 75%; } /*Barre latérale droite*/ .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } /*Section image*/ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /*Effet de carte d'article*/ .card { background-color: white; padding: 20px; margin-top: 20px; } /*Effacer les flottants après les colonnes*/ .row:after { content: ""; display: table; clear: both; } /*Pied de page*/ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /*Mise en page réactive - lorsque la taille de l'écran est inférieure à 800px, la disposition à deux colonnes passe à une disposition verticale*/ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /*Mise en page réactive - lorsque la taille de l'écran est inférieure à 400px, la navigation et les autres passent à une disposition verticale*/ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } }

Essayez-le vous-même »
autres extensions