LabEx
EntrerRejoindre

Fondamentaux de CSS pour la mise en forme web

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS. Le but de ce laboratoire est de vous aider à acquérir une compréhension solide de la syntaxe CSS, des sélecteurs, des propriétés et des valeurs. En complétant ce laboratoire, vous serez capable de styliser les éléments HTML et de créer des pages web visuellement attrayantes.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Hamburger Button

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un menu hamburger qui passe à un bouton croix au survol, suivez ces étapes :

  1. Utilisez un conteneur div .hamburger-menu qui contient les barres supérieure, inférieure et centrale.
  2. Définissez le conteneur sur display: flex avec flex-flow: column wrap.
  3. Ajoutez un espacement entre les barres en utilisant justify-content: space-between.
  4. Utilisez transform: rotate() pour faire tourner les barres supérieure et inférieure de 45 degrés et opacity: 0 pour faire disparaître la barre centrale au survol.
  5. Utilisez transform-origin: left pour que les barres tournent autour du point gauche.

Voici le code HTML correspondant :

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

Et voici le code CSS :

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu.bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover.top {
  transform: rotate(45deg);
}

.hamburger-menu:hover.middle {
  opacity: 0;
}

.hamburger-menu:hover.bottom {
  transform: rotate(-45deg);
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations ! Vous avez terminé le laboratoire Hamburger Button. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.