Index général
- Outils
- Références
- Tuyaux
This is an old revision of the document!
Voici un schéma exemple de découpage d'une page HTML5.
Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après.
A Faire :
Par exemple,
list-style: none;
Ce style supprime les puces et est utilisé pour structurer la barre de navigation.
Nous utiliserons le positionnement flottant
list-style: none;
Pour en savoir plus sur les possibilités de positionnement :
Vous pouvez utiliser les informations se trouvant sur http://deptinfo.unice.fr/~renevier/exemplesCSS/ pour construire par exemple la barre de menu.
http://www.alsacreations.com/astuce/lire/56-styler-la-balise-lthr-gt.html
Extrait les blocs se placent toujours l'un en-dessous de l'autre (saut de ligne, affichage à la verticale). Si on ne veut pas un tel comportement, on utilise “inline”. Dans une suite de paragraphes ou une liste les inline se placent toujours l'un à côté de l'autre (ils restent dans le texte courant).
http://www.w3schools.com/cssref/pr_class_display.asp
Soit le code d'une page contenant une iFrame.
<iframe src="iframe0.htm" id="iframe_0"></iframe> <p><a href="http://www.w3schools.com" target="iframe_0">W3Schools.com</a></p> <p><b>Note:</b> Parce que la cible du lien correspond au nom de l'Iframe, le lien s'ouvrira dans l'Iframe.</p>
pour le fichier iframe0.htm
, par exemple :
<body style="background-color:#F5DEB3"> <h1>Cette page sera visualisée dans l'IFRAME </h1> </body>
A Faire :
Voici un exemple classique de code, produit par google map :
<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/?ie=UTF8&t=h&ll=43.552529,6.987305&spn=0.955471,1.757813&z=9&output=embed"></iframe><br /><small><a href="https://maps.google.fr/?ie=UTF8&t=h&ll=43.552529,6.987305&spn=0.955471,1.757813&z=9&source=embed" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>
Mais ce format n'est pas valide en html5.
A Faire :
seamless
: Specifies that the <iframe> should look like it is a part of the containing document.A Faire :
img:hover { -webkit-transform: translate(0, -20px); /* -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -o-transform: translate(0, -20px); transform: translate(0, -20px); /* déclenchement de la transition au survol */ */ }
(source : http://www.alsacreations.com/tuto/lire/1333-osez-html5-et-css3.html)
a { font-size: 3em; font-weight: bold; color: #789; text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 3s; /* Pour Firefox */ /* -moz-transition-property: color; -moz-transition-duration: 2s; */ /* … et lorsque ce sera standardisé transition-property: color; transition-duration: 1s; */ }
(source : http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm)
http://www.alsacreations.com/xmedia/tuto/exemples/transitions/transition1.htm
Regardez et amusez vous à partir du site ci-après.
Par exemple :
.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; } @-webkit-keyframes anim2 { from {left: 0px; -webkit-transform: scale(1.0) rotate(0deg) } 50% {left: 600px; -webkit-transform: scale(0.5) rotate(10deg) } to {left: 1000px; -webkit-transform: scale(1.8) rotate(-20deg) } }
Et un peu plus : http://html5demo.braincracking.org/, caractéristique par caractéristique.
L'image est ici : http://www.w3schools.com/css/img_navsprites.gif
Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Je sais répondre à :
li:nth-child(even) { color: green; }