TP CSS – GoMyCode
Le but est de réaliser un site où la page suivante :
1. Réaliser les 2 menus ci-dessus en respectant chacune les mise en forme suivantes :
a. Style Menu 1 :
i. Les élément du menu sont les éléments d’une liste <ul>, comme les liste sont de
type bloc nous allons les forcer à être inline avec la propriété display : inline ; il
faut aussi enlever les puce avec la propriété liste-style-type :none.
ii. Laisser un espace intérieur de 20px
iii. La couleur d’arrière-plan est cornflowerblue
iv. La courbure des coins est de 10px
v. Et pas de bordures
vi. Cette liste est mise dans un blic <div> qui les propriétés suivantes :
1. La marge top est de 50px
2. Le texte est aligné au milieu
vii. Les liens ne sont pas soulignés, gras et noirs
b. Style Menu 2 : la même chose que menu 1 sauf :
i. La couleur d’arrière-plan est cyan
ii. La courbure des coins est de 10px et n’est appliquée que sur les coins du haut.
2. Nous allons maintenant réaliser un menu vertical avec les <div> et la propriété box-shadow.
La feuille de style de chaque div doit respecter les
consignes suivantes :
a) Alignement :centré;
b) Police en gras
c) L’espacement intérieur 10px;
d) Largeur 8%;
e) hauteur:8%;
f) couleur d’arrière plan :ThreeDLightShadow;
g) larger vertical et horizontal de l’ombre 5px 5px
h) couleur de l’ombre rgba(80,80,80,0.5) avec inset;
i) courbure des coins:10px;
j) taille de police :12px;
3. Le dernier menu que nous allons réaliser repose uniquement sur la balise <div>. Les boutons du
menu change de bouton bombé à enfoncé quand on passe la souris sur les boutons du menu en
utilisant la propriété box-shadow.
a. Nous allons réaliser une feuille de style qui comporte 4 styles pour div :
i. Style : divnormal :
Couleur d’arrière plan:rgba(80,80,80,0.5);
largeur:60%;
hauteur:50px;
marge top:8px;
Courbure coin:20px;
Espace intérieur top:20px;
Alignement text:center;
ii. Style : divbouton :
▪ Marge interne partout :15px;
▪ Alignement texte:center;
▪ Texte gras;
▪ Affichage en ligne (display : inline);
▪ La marge partout :10px;
▪ largeur:100px;
▪ hauteur:80px;
▪ taille du texte:12px;
▪ couleur d’arrière plan :rgba(80,80,80,0.5) ;
▪ courbure des coins:20px;
▪ pour l’ombre box-shadow: ombre en haut noir et en bas blanc 2px horizotal
0px 2px 2px rgba(0, 0, 0, 0.5),
0px 2px 2px rgba(255, 255, 255, 0.5) inset;
iii. Style : divenfonce : style appliqué à div bombé qui est dans le div normal quand la
souris pass sur lui.
▪ Marge intren partout :15px;
▪ Alignement texte:center;
▪ Texte gras;
▪ Affichage en ligne (display : inline);
▪ La marge partout :10px;
▪ largeur:100px;
▪ hauteur:80px;
▪ taille du texte:12px;
▪ couleur d’arrière plan :rgba(80,80,80,0.5) ;
▪ courbure des coins:20px;
▪ pour l’ombre box-shadow: ombre blanc et noir en haut et bas 2px horizotal
0px 2px 2px rgba(0, 0, 0, 0.5),
0px 2px 2px rgba(255, 255, 255, 0.5) inset;
iv. Style : divbig: style appliqué à divbouton qui est dans le div normal quand la souris
pass sur lui.
▪ Même chose qu’avant (enfonce) avec 20px pour le padding
