Positionnement relatif, absolu et fixe CSS19

Cet exercice consiste à reproduire des modèles en positionnant des éléments html en absolu ou en relatif.

Consignes de l’exercice

Créez un dossier racine à l’emplacement de votre choix.

Créez un fichier html intitulé position-css19-1.html avec la structure de base suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Positionnements relatifs et absolus</title>
    </head>
    <body>


    </body>	
</html>

Créez un fichier css intitulé  position-css19.css et liez-le à la page position-css19-1.html.

Observez attentivement l’exemple ci-dessous (faites varier la largeur de la fenêtre si nécessaire), puis reproduisez-le sur la page position-css19-1.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez un nouveau fichier position-css19-2.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-2.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez un nouveau fichier position-css19-3.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-3.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez un nouveau fichier position-css19-4.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-4.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez un nouveau fichier position-css19-5.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-5.html  en reexploitant le code de l’exercice précédent.

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Créez un nouveau fichier position-css19-6.html auquel vous liez le fichier css.

Observez attentivement l’exemple ci-dessous, puis reproduisez-le sur la page position-css19-6.html .

Consulter le code de « Pen » par Julien Crego (@crego) sur CodePen.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.