Semaine 4 : Mise en page avec CSS

Avant la séance (2h)

Lisez la page sur les sélecteurs et la page de test

Regardez les video suivantes sur la mise en page avec CSS et le flottement:

Commencer les exercices pour compléter vos 2 heures de travail préparatoire.
Pendant la séance

Vous devez compléter les exercices sur la mise en page.

Vous devez compléter la partie du TP portant sur la mise en page CSS.

Exercice A

Créez une page appelée carre.html avec une div carré bleue de 100x100 pixels centrée horizontalement.

Exercice B

Créez une page appelée mesures.html.

  • une div de 400 pixels de large et 150 pixels de haut, incluant une border de 10 pixels
  • trois images qui se succède horizontalement en occupant chacune un 1/3 de la largeur de la page
  • une div de 20 cm de large contenant 3 span de 5 cm chacun et de 3em de hauteur

Exercice C

Créez une page appelée boite.html dans laquelle vous insérez une div avec les propriétés suivantes.

  • une bordure rouge de 10 pixels sur les côtés et 5 pixels en haut et en bas
  • une marge de 20 pixels uniquement à gauche
  • un padding de 30 pixels en haut et en bas, rien sur les côtés
  • une hauteur totale de 200 pixels et une largeur totale de 400 pixels.

Utilisez l'inspecteur de Chrome pour vérifier vos dimensions. Insérez une grande quantité de Lorem Ipsum dans votre div et arranger vous pour afficher une barre de défilement dans la div.