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

Correction TP2 Les menus en HTML et CSS

Un cours complet pour maîtriser Correction TP2 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. Travail demandé

    1. HTML
      2. <!doctype html>
<html>
<head>
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="F:\groupes centre\ELITE\css\exercices\TP les menus\Tp2 les  menus en CSS/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>

<nav>
 <ul id="menu_vertical">
  <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/menu.html">Accueil</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours html.html">HTML</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours css.html">CSS</a></li>
  <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours html TP.html">HTML TP</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours css TP.html">CSS TP</a></li>
 </ul>
</nav>
<div class="div">
<h3> Travaux pratiques HTML</h3>
<p>Pour le moment, nous allons nos contenter d’écrire la structure minimale d’une page HTML dans chacun d’entre eux afin de les rendre valides ainsi qu’une phrase de texte pour les distinguer.</p>
</div>
<nav>
 <ul  id="menu_horizontal">
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/menu.html">Menu</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours html.html">HTML</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours css.html">CSS</a></li>
  <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours html TP.html">HTML TP</a></li>
 <li><a href="F:/groupes centre/ELITE/css/exercices/TP les menus/Tp2 les  menus en CSS/cours css TP.html">CSS TP</a></li>
 </ul>
</nav>
</div>
</body>
</html>
    2. CSS
      3. /* CSS du menu */
* {
margin: 0;
padding: 0;
}
body {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background-color:#e0e0e0;
}
.div{
width:576px;
margin-left:4px;
margin-bottom:20px;
height:auto;
/*background-color:red;*/
float:left;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
box-shadow: rgba(0, 0, 0, 0.4) 0 3px 10px;
padding:10px;
min-height:150px;
}
#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;
clear:both;
}
h1, h2 {
color: #333333;
}

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

#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;
}