User Tools
2015_2016:s1:webdoc:td6
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
2015_2016:s1:webdoc:td6 [2015/12/07 15:34] urli [Positionnement en CSS] |
2015_2016:s1:webdoc:td6 [2015/12/07 15:40] urli [Structure] |
||
|---|---|---|---|
| Line 13: | Line 13: | ||
| <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| - Commencez par créer une page html5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''. | - Commencez par créer une page html5 contenant une zone ''header'', une zone ''nav'', une zone ''aside'', 5 zones ''section'' et une zone ''footer''. | ||
| - | - A l'aide d'un fichier CCS, définissez les propriétés suivantes pour les zones : | + | - A l'aide d'un fichier CSS, définissez les propriétés suivantes pour les zones : |
| * header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales | * header : prend toute la largeur de la page, contiendra un texte de 40px de haut et en petites capitales | ||
| * nav sera une zone horizontale sous le header de 600px de large (on y reviendra à la fin) | * nav sera une zone horizontale sous le header de 600px de large (on y reviendra à la fin) | ||
| Line 46: | Line 46: | ||
| Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel). | Si vous avez besoin d'aide pour les transitions, n'hésitez pas à vous reporter au tutoriel suivant : http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html (consultez aussi les pages 2 à 4 de ce tutoriel). | ||
| - | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| - | Maintenant, vous devez créer dans votre 2e zone ''section'', une zone ''div'' contenant 4 zones ''section''. Chacune de ces nouvelles zones section contiendra une zone ''header'', ''article'' et ''footer''. L'image ci-dessus vous donne une idée du résultat. Ces nouvelles sections auront une largeur de 160px. | ||
| - | * le header contiendra un mot de titre | ||
| - | * l'article un texte explicatif | ||
| - | * le footer ce que vous souhaitez | ||
| - | * Le header et l'article seront séparés d'une barre (''border-bottom'') composée de points qui n'occupera pas toute la largeur. | ||
| - | * Lorsque vous survolez une section avec la souris, les angles s'arrondissent de 40px et 10px, et l'échelle s'agrandit de 1.1; | ||
| - | </box> | ||
| ===== La balise vidéo ===== | ===== La balise vidéo ===== | ||
| HTML5 a introduit plusieurs nouvelles balises dont 2 balises multimédia (la balise video et la balise audio). | HTML5 a introduit plusieurs nouvelles balises dont 2 balises multimédia (la balise video et la balise audio). | ||
2015_2016/s1/webdoc/td6.txt · Last modified: 2015/12/07 16:15 by urli
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
