Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Positionnement Fixe | Positionnement des Éléments
Techniques CSS Avancées
course content

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction
Aperçu du CoursObjectif du CoursSujets du CoursComment Réussir
2. Positionnement des Éléments
Qu'est-ce Que le Positionnement?Positionnement RelatifDéfi : Positionnement RelatifPositionnement AbsoluDéfi : Positionnement AbsoluPositionnement FixeDéfi : Positionnement FixePositionnement StickyDéfi : Positionnement StickyOrdre d'EmpilementDéfi : Ordre d'EmpilementDébordement de Contenu
3. Transitions
Qu'est-ce Qu'une Transition ?Sélection de la Propriété de TransitionDurée de TransitionFonction de Temps de TransitionDélai de Temps de TransitionCombinaison de TransitionDéfi : Ajout de Transition
4. Animations
Qu'est-ce Que l'Animation ?Spécifier le Temps de l'AnimationContrôler la Quantité et la Direction de Lecture de l'AnimationGestion de l'État de l'AnimationComposition d'AnimationDéfi : Ajouter une Animation
5. Transformations
Qu'est-ce Que la Transformation?Mise à l'ÉchelleRotationDéfi : Ajout de Mise à l'Échelle et de RotationTraduireInclinaisonPerspectiveDéfi : Ajouter la Translation et l'Inclinaison
6. Sites Web et Applications Adaptatifs/Réactifs
Qu'est-ce Que le Design Adaptatif/Réactif ?@media RequêteDispositions Adaptatives - RéactivesInspection de la Page WebDéfi : Inspection de la Mise en Page Adaptative/Réactive
7. Préprocesseurs
Qu'est-ce Qu'un Préprocesseur ?Syntaxe SassVariables SassOpérateurs Numériques SassImbrication SassDirective @extendStructure des Dossiers-Fichiers

book
Défi : Positionnement Fixe

Tâche

Créez une barre de navigation de site Web qui reste fixée en haut de la page Web pour que les utilisateurs puissent y accéder à tout moment. Étapes :

  1. Appliquez le positionnement fixed à la liste de navigation.
  2. Choisissez une propriété pour le déplacement horizontal (left ou right).
  3. Choisissez une propriété pour le déplacement vertical (top ou bottom).
  4. Testez la fonctionnalité en cliquant sur différents liens et en vous assurant que la page défile tout en gardant la barre de navigation visible.
html

index.html

css

index.css

copy
  1. Définissez la propriété top à 0 pour garder la navigation en haut de la page web.
  2. Pour le positionnement horizontal, vous pouvez utiliser soit left: 0; pour l'aligner avec le bord gauche de la fenêtre ou right: 0; pour l'aligner avec le bord droit.
html

index.html

css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 7
We're sorry to hear that something went wrong. What happened?
some-alt