Création de Menus HTML et CSS

Réaliser des menus avec du texte
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Dreamweaver CS5
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

À l'issue de cette leçon, vous serez capable de :

  • Créer des menus verticals et horizontaux en HTML et CSS.
  • Utiliser des règles CSS pour ajuster la mise en page des menus.
  • Appliquer des styles aux liens pour une meilleure expérience utilisateur.

Découvrez comment créer des menus verticaux et horizontaux en utilisant HTML et CSS pour optimiser la navigation sur votre site.

Dans cette leçon, nous explorons la création de menus à l'aide de HTML et CSS. Nous commencerons par la réalisation d'un menu vertical, en utilisant des balises UL et LI pour structurer les éléments. Nous attribuerons des identifiants uniques et appliquerons des règles CSS pour ajuster la mise en forme, notamment la suppression des puces avec list-style: none; et l'ajout de marges pour espacer les éléments.

La deuxième partie de la leçon se concentre sur la création d'un menu horizontal. Nous utiliserons des balises OL pour différencier visuellement la liste des éléments. L'élément critique ici est l'application de display: inline; à chaque élément LI pour qu'ils s'alignent horizontalement. Nous veillons également à définir des marges pour espacer les éléments entre eux.

Enfin, nous abordons le stylisme des liens, en utilisant des sélecteurs CSS comme a:link et a:hover pour définir des couleurs spécifiques et des effets de survol, garantissant ainsi une interaction utilisateur cohérente et esthétique.

Voir plus
Questions réponses
Quel est l'avantage d'utiliser des identifiants pour les balises UL dans la création de menus?
Les identifiants permettent de cibler spécifiquement les balises UL dans votre CSS, facilitant ainsi des styles uniques pour différents menus sur une même page.
Pourquoi utiliser display: inline pour les éléments LI dans un menu horizontal?
La propriété display: inline permet de disposer les éléments LI côte à côte horizontalement, ce qui est nécessaire pour un menu horizontal.
Comment peut-on supprimer les puces des listes en CSS?
On peut supprimer les puces des listes en utilisant la propriété CSS list-style: none; sur les balises UL ou OL.

Programme détaillé