Correction TP2 Les menus en HTML et CSS
Correction TP2 Les menus en HTML et CSS
-
Travail demandé
-
HTML
-
CSS
<!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>/* 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;
}