Scribd Logo
Upload

Welcome to Scribd!

  • Contexte Flex PDF

    Uploaded by

    zmjuventino1612
    23 views6 pages
    The document discusses using CSS Flexbox to lay out a login form. It provides the HTML for a form with fields for username and password within a fieldset, as well as submit and reset buttons. The task is to use Flexbox properties like display: flex, flex-direction, and justify-content to properly style and position the form fields and buttons. Examples of different Flexbox properties are also provided to help with the task.

    Original Description:

    Original Title

    contexte_flex.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses using CSS Flexbox to lay out a login form. It provides the HTML for a form with fields for username and password within a fieldset, as well as submit and reset buttons. The task is to use Flexbox properties like display: flex, flex-direction, and justify-content to properly style and position the form fields and buttons. Examples of different Flexbox properties are also provided to help with the task.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    23 views6 pages

    Contexte Flex PDF

    Uploaded by

    zmjuventino1612
    The document discusses using CSS Flexbox to lay out a login form. It provides the HTML for a form with fields for username and password within a fieldset, as well as submit and reset buttons. The task is to use Flexbox properties like display: flex, flex-direction, and justify-content to properly style and position the form fields and buttons. Examples of different Flexbox properties are also provided to help with the task.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    TP:CSS : Contexte Flex 3_4:STI

    Niveau : 3STI
    Prof : Fredj Imed
    Lycée : Mazel Ennour

    333px
    Section

    33px

    103px
    padding :3.3px Carre

    Cadre

    HTML CSS
    <section> section {
    <h3> align-items: center ; </h3> border: solid 1px;
    <div class="cadre"> padding: 10px;
    <div class="carre"></div> width: 333px;
    <div class="carre"></div> box-shadow: 3px 3px 6px;
    <div class="carre"></div> }
    <div class="carre"></div> .cadre {
    </div> display: flex;
    </section> flex-direction: row;
    align-items:flex-start;
    background-color: #FFFCAD;
    width: 333px;
    height: 103px;
    }
    .carre {
    width: 33px;
    height: 33px;
    border: solid;
    margin: 3.3px;
    }
    .carre:nth-child(1) {
    background-color: #6EF74C;
    }
    .carre:nth-child(2) {
    background-color: #14556D;
    }
    .carre:nth-child(3) {
    background-color: #CE026F;
    }
    .carre:nth-child(4) {
    background-color: #bd9b81;
    }
    capture ecran CSS

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:center;
    }

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:flex-end;
    }

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: - - - - - - - -- ;
    }

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: - - - - - - - -- ;
    }

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: - - - - - - - -- ;
    }

    .cadre {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: - - - - - - - -- ;
    }

    .cadre {
    display: flex;
    align-items:center;
    justify-content: - - - - - - - -- ;
    }
    .cadre {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content:flex-end;
    background-color: #FFFCAD;
    width: 103px;
    height: 333px;
    }

    Résumé
    row;
    flex-direction:
    column;
    flex-start;
    flex-end;
    align-items: center;
    left;
    right;
    flex-start;
    justify-content:
    flex-end;
    center; space-beween; space-around;
    Exercice d'application :
    Ecrire le code de la page HTML5 ainsi que la mise en forme CSS3 permettant d'afficher la section suivante :
    solution :

    HTML CSS
    <body>
    <section> .box {
    <div class="cadre"> border: solid 1px;
    <div class="box"> margin: 8px;
    <a href="#"> TP n°1 </a> width: 100px;
    </div> height: 40px;
    <div class="box"> text-align: center;
    <a href="#"> TP n°2 </a> border-radius: 40%;
    </div> box-shadow: 2px 2px 4px blue;
    <div class="box"> line-height: 40px;
    <a href="#"> TP n°3 </a> transition: .1s linear all;
    </div> font-weight: bold;
    <div class="box"> }
    <a href="#"> TP n°4 </a>
    </div> .box:hover {
    <div class="box"> transform: scale(1.05);
    <a href="#"> TP n°5 </a> box-shadow: 4px 4px 4px blue;
    </div> cursor: pointer;
    </div> }
    <img src="logo.jpg" id="logo">
    </section> section {
    </body> border: solid 1px;
    padding: 10px;
    width: 333px;
    box-shadow: 3px 3px 6px;
    margin:100px;
    display:flex;
    justify-content:flex-start;
    align-items: center;
    }
    #logo{
    width:200px;
    height:max-content;
    }

    .cadre {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    background-color: #FFFCAD;
    width: 150px;
    height: 333px;
    }
    II. diviser l'espace avec Flex
    Activité
    Utiliser le contexte Flex pour mettre en forme le formulaire suivant :

    HTML CSS
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen'
    href='formulaire.css'>
    <script src='main.js'></script>
    </head>
    <body>
    <div class="formulaire">
    <form action="formulaire.php" method="POST">
    <fieldset style="width:400px;">
    <legend>login :</legend>
    <div class="input-group">
    <label for="identifiant">Identifiant :</label>
    <input type="text" id="identifiant" maxlength="20">
    </div>
    <div class="input-group">
    <label for="password">Password :</label>
    <input type="password" id="identifiant" maxlength="20">
    </div>
    <div class="button-group">
    <input type="submit">
    <input type="reset">
    </div>
    </fieldset>
    </form>
    </div>
    </body>
    </html>

    Résultat
    Correction :

    .input-group{
    display:flex;
    }
    label{
    flex:1;
    margin:10px auto;
    }
    [type="text"],[type="password"]{
    flex:3;
    margin:10px auto;
    }
    [type="submit"],[type="reset"]{
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    width:25%;
    }
    .button-group{
    display:flex;
    justify-content:right;
    }

    Exercice d'application :
    Utiliser le contexte Flex pour mettre en forme la page si dessus :
    HTML CSS
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible'
    content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-
    width,
    initial-scale=1'>
    <link rel='stylesheet' type='text/css'
    media='screen'
    href='main.css'>
    <script src='main.js'></script>
    </head>
    <body>
    <header>
    [header]
    </header>
    <nav>
    [nav]
    </nav>
    <main>
    [main]
    </main>
    <footer id="f1">
    [footer]
    </footer>
    </body>
    </html>

    You might also like