article(s) dans votre panier VOIR

Un layout pour navigation mobile avec header et footer fixes grâce aux Flexbox CSS

  • Vidéo 9 sur 9
  • 46:24 de formation
  • 9 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Un layout pour navigation mobile avec header et footer fixes
00:00 / 04:46
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
14,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce tutoriel concernant la mise en page responsive avec les Flexbox CSS, l’auteur Jean Bernard André vous explique le layout pour navigation mobile avec header et footer fixes. Ce cours en ligne a pour objectif de créer un layout pour navigation mobile avec Flexbox. Pour y parvenir, vous devez tout d’abord créer un fichier HTML. Dans ce dernier, vous insérez une base de code HTML. Ensuite de cela, vous ajoutez un header, un article ainsi qu’un footer. Dans le header, vous créez une classe nommée header et de même pour footer. D’autre part, vous devez mettre en place une feuille de style CSS qui doit être liée à la page HTML créée précédemment. Il faut savoir que dans cette feuille de style, le container est le body. Ainsi, dans ce dernier, vous définissez sa largeur et sa hauteur. Ceci étant fait, vous mettez la propriété Display : flex. Vous pouvez aussi ajouter un Flex-direction, en lui attribuant une valeur Column. Il vous est également possible de joindre un Justify-content pour valeur Space-between. Sachant que ce dernier vous permet de distribuer les éléments en fonction de l’espace disponible. Pour conclure, vous pouvez constater qu’il est facile de créer un layout pour navigation mobile en vous servant de cette vidéo.