-
Démo a
Démo b
A partir du code html suivant, dispose les blocs comme sur les images a et b:
- en utilisant uniquement les propriétés float et clear pour le positionnement
- la fs doit être la plus minimaliste possible
<body>
<section>
<article class=a1>Bloc n°1</article>
<article class=a2>Bloc n°2</article>
<article class=a3>Bloc n°3</article>
<article class=a4>Bloc n°4</article>
<article class=a5>Bloc n°5</article>
</section>
</body>
- Démo A partir du code html suivant, dispose les blocs comme sur l'image:
- en utilisant uniquement les propriétés float et clear pour le positionnement
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
<body>
<section>
<article class=a1>Bloc n°1</article>
<article class=a2>Bloc n°2</article>
<article class=a3>Bloc n°3</article>
<article class=a4>Bloc n°4</article>
<article class=a5>Bloc n°5</article>
</section>
</body>
-
Démo a
Démo b
A partir du code html suivant, dispose les blocs comme sur les images a et b:
- en utilisant uniquement la propriété relative pour le positionnement
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
<body>
<section>
<article class=a1>Bloc n°1</article>
<article class=a2>Bloc n°2</article>
<article class=a3>Bloc n°3</article>
<article class=a4>Bloc n°4</article>
<article class=a5>Bloc n°5</article>
</section>
</body>
-
Démo a
Démo b
Démo c
A partir du code html suivant, dispose les blocs comme sur les images a, b et c:
- en utilisant uniquement la propriété absolute pour le positionnement
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
<body>
<section>
<article class=a1>Bloc n°1</article>
<article class=a2>Bloc n°2</article>
<article class=a3>Bloc n°3</article>
<article class=a4>Bloc n°4</article>
<article class=a5>Bloc n°5</article>
</section>
</body>
-
Démo a
Démo b
Démo c
Démo d
A partir du code html suivant, dispose les blocs comme sur les images a, b, c et d:
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
<body>
<header>
MyWEBSITE
</header>
<nav>
my menu...
</nav>
<section>
my contenu
</section>
<footer>
my footer
</footer>
<aside>
my links
</aside>
</body>
-
Démo a
Démo b
Démo c
A partir du code html suivant, dispose les blocs comme sur les images a, b et c:
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
<body>
<section>
<p class=citation>
Je connais un perroquet parleur qui a poussé les limites de l’imbécillité volaillère
jusqu’à l’infini. Branché sur son perchoir avec des grâces altières d’empereur
trichromosomique surplombant les arènes à chrétiens, il lui arrivait de se réveiller soudain,
à peu près toutes les vingt secondes, pour siffler à tue-tête les cinq premières notes de la
marche du colonel Bogey.<br>
N’était la chaleureuse amitié qui me lie aux humains que cet emplumé a apprivoisés,
j’aurais depuis longtemps pris un plaisir exquis à lui défoncer la gueule à coups
de clé anglaise ou à lui écarteler le trou du cul à l’aide d’un tisonnier chauffé à blanc.
</p>
<p class=auteur>Pierre Desproges</p>
</section>
</body>
-
Démo c
A partir du code html suivant, dispose les blocs comme sur l'image:
- la fs doit être la plus minimaliste possible
- l'effet doit être le même au redimenssionnement de la fenêtre
- la carte survolée doit s'afficher entièrement
<body>
<header>
Mijn heel mooie website
</header>
<section>
<p class=cp><img src="image/excss/aspic.png"></p>
<p class=cc><img src="image/excss/ascoeur.png"></p>
<p class=ct><img src="image/excss/astrefle.png"></p>
<p class=cca><img src="image/excss/ascarreau.png"></p>
</section>
</body>
