Dans le cours : L’intégration web : Coder un design en HTML et CSS

Accédez à ce cours grâce à un essai gratuit

Inscrivez-vous aujourd’hui pour accéder à plus de 24 700 cours dispensés par des experts.

Définir la mise en page générale de l'en-tête grâce aux CSS grids

Définir la mise en page générale de l'en-tête grâce aux CSS grids

Dans le cours : L’intégration web : Coder un design en HTML et CSS

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Définir la mise en page générale de l'en-tête grâce aux CSS grids

“

Nous avons maintenant terminé la mise en place des styles principaux et des valeurs par défaut qui vont gouverner l'ensemble de notre mise en page. Dans ce chapitre, nous allons donc nous concentrer sur la finalisation de la zone d'en-tête et du pied de page. On commence par l'en-tête et on adopte le principe du mobile first. On commence par créer la mise en page sur les écrans les plus étroits pour l'adapter ensuite aux écrans les plus larges. Comme d'habitude, on commence par observer notre maquette Photoshop. Alors, qu'avons-nous dans l'en- tête sur les écrans les plus étroits ? Eh bien, on a deux choses. On a le logo à gauche et on a le bouton qui nous permettra d'ouvrir et fermer le menu à droite. Pourtant, dans notre code HTML, rappelez-vous qu'on a trois éléments à l'intérieur de notre en-tête. Notre en-tête, c'est ce conteneur header qui a la classe wrapper qui se termine ici plus bas. Cet élément est lui-même à l'intérieur du div qui s'appelle main header et cet élément…

Table des matières