Vous êtes sur la page 1sur 3

14/09/2017 Exercice HTML: Menu Dynamique

Cours informatique
Cours comptabilit
Cours conomie
Cours marketing
Cours management
Cours gestion
Cours statistique
Cours finance
Cours lectricit
Annonces Google Exercice corrig PDF Link HTML HTML header

Exercice HTML: Menu Dynamique


0
Jaime
Annonces Google
Partager
Exercice

HTML 5 CSS
Annonces Google

Travail Faire:

Ecrire le code HTML et CSS qui permet de raliser le Menu suivant:

Tlcharger les images suivantes Afin de pouvoir raliser le Menu demand:

1 /* CSS Document */
2 *{
3 margin:0;
4 padding:0;
5 }
6 #menu{
7 width:90%;
8 margin:25px auto;
9 }
10 #menu ul{
11 list-style:none;
12 }
13 #menu li{
14 display:block;
15 float:left;
16 }
17 #menu li a{
18 background:#749b10 url(images/menu_bg.gif) repeat-x;
19 border:2px solid #80a225;
20 margin:0 1px;
21 padding:15px 15px 15px 15px;
22 display:block;
http://www.cours-gratuit.com/exercices-html/exercice-html-menu-dynamique 1/3
14/09/2017 Exercice HTML: Menu Dynamique
23 float:left;
24 color:#fff;
25 text-transform:uppercase;
26 text-decoration:none;
27 font-family:Geneva, Arial, Helvetica, sans-serif;
28 font-size:13px;
29 font-weight:bold;
30 height: 50px;
31 }
32 #menu li a span{
33 color:#52651f;
34 font-size:10px;
35 text-transform:lowercase;
36 font-family:Geneva, Arial, Helvetica, sans-serif;
37 font-weight:normal;
38 }
39 #menu li a:hover{
40 background:#e46825 url(images/menu_hover.gif) repeat-x;
41 border:2px solid #c04118;
42 text-decoration:none;
43 }
44 #menu li a:hover span{
45 color:#ffd9c7;
46 }
47 .current{
48 background:#e46825 url(images/menu_hover.gif) repeat-x;
49 border:2px solid #c04118;
50 margin:0 1px;
51 padding:15px 15px 15px 15px;
52 display:block;
53 float:left;
54 color:#fff;
55 text-transform:uppercase;
56 text-decoration:none;
57 font-family:Geneva, Arial, Helvetica, sans-serif;
58 font-size:13px;
59 cursor:pointer;
60 font-weight:bold;
61 height: 50px;
62 }
63 .current span{
64 color:#ffd9c7;
65 font-size:10px;
66 text-transform:lowercase;
67 font-family:Geneva, Arial, Helvetica, sans-serif;
68 font-weight:normal;
69 }

1
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
4 <title>Green Menu</title>
5 <link href="menu.css" rel="stylesheet" type="text/css" />
6 </head>
7 <body>
8 <div id="menu">
9 <ul>
10 <li class="current">Home<br /><span>takes you to<br /> home page</span></li>
11 <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li>
12 <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li>
13 <li><a href="#">Partners<br /><span>takes you to<br />partners page</span></a></li>
14 <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li>
15 </ul>
16 </div>
17 </body>
18 </html>

http://www.cours-gratuit.com/exercices-html/exercice-html-menu-dynamique 2/3
14/09/2017 Exercice HTML: Menu Dynamique

Crez un site
vous mme
Pack cl en main, simple
a utiliser 300 modles,
Start Download - View PDF domaine .com, emails
Convert From Doc to PDF, PDF to a-a-hebergement.com
Doc Simply With The Free Online
App!

0 commentaires Trier par Les plus rcents

Ajouter un commentaire...

plugin Commentaires Facebook

Voir Aussi ...


Exercice HTML: Dbuter avec HTML
Exercice HTML: HTML Pas Pas
Exercice HTML: Simples Balises
Exercice HTML: Insertion Image
Exercice HTML: Hyperliens
Exercice HTML: Tableaux
Exercice HTML: Simple Formulaire
Exercice HTML: Ralisation d'un Formulaire de QCM
Exercice HTML: Cration Formulaire Rponse QCM
Exercice HTML: Formulaire Type

Web scraping R Pour nous contacter : ks.smartweb@gmail.com

http://www.cours-gratuit.com/exercices-html/exercice-html-menu-dynamique 3/3