Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
CSS

Correction TP1 Les menus en HTML et CSS

Un cours complet pour maîtriser Correction TP1 Les menus en HTML et CSS.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
CSS Historique et versions
Les sélecteurs simples en CSS
Structure et règles CSS
Exercices en CSS les sélecteurs Série 01
Test d'évaluation en CSS3 sous forme de QCM
Présentation du CSS3
Exercices en CSS les sélecteurs Série 02
Intégrer du CSS dans une page html
Exercices en CSS les sélecteurs Série 03
Le positionnement des éléments
Les balises de bloc et les balises en-ligne
Notion de flux en CSS
Notion de modèle de boîte CSS
Les Marges en CSS
Unités de dimension en CSS
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectif

    • Etre capable de réaliser un menu simple en HTML et en CSS.

  2. Travail demandé

  3. Mise en forme CSS de notre menu HTML

    1. Fichier HTML
      2. <!doctype html>
<html>
<head>
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="Chemin de fichier/menu_style.css">
</head>

<body>
<div id="conteneur">
 <h1>Création d'un menu en <abbr title="Hypertext Markup
Language">HTML</abbr> et <abbr title="Cascading Style
Sheets">CSS</abbr></h1>
<h2>Menu vertical</h2>
<nav>
 <ul id="menu_vertical">
 <li><a href="#">Lien 1</a></li>
 <li><a href="#">Lien 2</a></li>
 <li><a href="#">Lien 3</a></li>
 <li><a href="#">Lien 4</a></li>
 <li><a href="#">Lien 5</a></li>
 </ul>
</nav>
<h2>Menu horizontal</h2>
<nav>
 <ul  id="menu_horizontal">
 <li><a href="#">Lien 1</a></li>
 <li><a href="#">Lien 2</a></li>
 <li><a href="#">Lien 3</a></li>
 <li><a href="#">Lien 4</a></li>
 <li><a href="#">Lien 5</a></li>
 </ul>
</nav>
</div>
</body>
</html>
    2. Dans le fichier CSS déjà crée ajouter les propriétés nécessaires pour obtenir la page suivante
      3. /* CSS du menu */
* {
margin: 0;
padding: 0;
}
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#e0e0e0;
}
#conteneur {
width: 800px;
min-height:450px;
border:1px solid #999;
margin-top:10px;
margin-bottom:10px;
margin-right:auto;
margin-left:auto;
padding:20px;
background-image: linear-gradient(to bottom right, white , olive);
}
h1 {
font-size:26px;
margin-top: 15px;
margin-bottom: 30px;
text-align:center;
}
h2 {
font-size:20px;
margin-top:35px;
margin-bottom:10px;
}
h1, h2 {
color: #333333;
}

#menu_vertical {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}

#menu_horizontal {
list-style: none;
margin: 0;
padding: 0;
}
/*--------------------------*/
#menu_vertical li {
border:1px solid #999;
background-color: #e0e0e0;
margin: 1px;
text-align: center;
}
#menu_horizontal li {
border:1px solid #999;
background-color: #e0e0e0;
margin: 1px;
text-align: center;
display: inline-block;
width: 150px;
}
/*--------------------------*/
#menu_vertical li a {
display: block;
color: #666666;
font-size:16px;
line-height:16px;
padding-top:8px;
padding-bottom:8px;
text-decoration: none;
}
#menu_horizontal li a {
display: block;
color: #666666;
font-size:16px;
line-height:16px;
padding-top:8px;
padding-bottom:8px;
text-decoration: none;
}
/*--------------------------*/
#menu_vertical li a:hover{
color: #e0e0e0;
background-color: #666666;
}

#menu_horizontal li a:hover{
color: #e0e0e0;
background-color: #666666;
}
/*--------------------------*/
#menu_vertical li a:active{
color:#fff;
}
#menu_horizontal li a:active{
color:#fff;
}