Informatique


Exercices sur les containers

  • Créer une page (uniquement les balises structurantes du document html), intégrer un paragraphe de classe macl ayant les caractéristiques suivantes: (boite_1.htm)
    • une largeur de 80% du bloc qui contient le paragraphe
    • une marge interne de 15px
    • une bordure de type solid, noire, et de 2px d'épaisseur
    Attention: utiliser la forme éclatée et la forme condensée pour border.
  • Modifier la classe macl avec les caractéristiques suivantes: (boite_2.htm)
    • une largeur de 100% du bloc qui contient le paragraphe
    • une marge interne de 15px
    • une bordure de type solid, rouge, et de 2px d'épaisseur
    • Un fond gris
    On constate que la boîte dépasse légèrement la largeur de l'écran, pourquoi?
    Que pourrait-on faire pour qu'elle occupe exactement la largeur de l'écran? (boite_3.htm)
  • Créer une page (uniquement les balises structurantes du document html), intégrer un paragraphe de classe bellecl ayant les caractéristiques suivantes: (boite_4.htm)
    • une largeur de 10% du bloc qui contient le paragraphe
    • une marge interne de 10px à gauche et à droite
    • une marge interne de 20px en haut et en bas
    • une bordure gauche de 10px, rouge et de type solid
    Attention: utiliser la forme éclatée et la forme condensée pour margin.
  • Créer une page (uniquement les balises structurantes du document html), intégrer un paragraphe de classe look ayant les caractéristiques suivantes: (boite_5.htm)
    • le bloc doit être centré sur la largeur par rapport au bloc qui le contient
    • une largeur de 20% du bloc qui contient le paragraphe
    • une marge interne de 10px
    • une bordure rouge, de type ridge et 10px d'épaisseur
    • centrer le texte à l'intérieur du bloc
  • Créer une page (uniquement les balises structurantes du document html), intégrer un paragraphe de classe p2 dans une division de classe contai ayant les caractéristiques suivantes: (boite_6.htm)

    Pour contai:
    • largeur 60%
    • bordure en pointillés, rouge et 3px d'épaisseur
    • marge interne 5px
    Pour p2:
    • imbriquée dans p1
    • centré sur la largeur dans p1
    • largeur 50%
    • bordure en solid, rouge et 2px d'épaisseur
    • marge interne 5px
    • centrer le texte au sein du bloc
    On constate que la boîte interne subit un espacement en haut et en bas dans la division, comment annuler cet effet par défaut? (boite_7.htm)
  • Démo