Pages

Bootstrap ?

Mais que veut dire col-xs-12 col-sm-6 col-md-2 col-lg-8 ?

Examinons d'abord le comportement des class en redimensionnant votre fenêtre.

Les classes possibles

col-xs-12 col-sm-6 col-md-2 col-lg-8
col-xs-6 col-sm-6 col-md-10 col-lg-4

La classe appliquée


See the Pen Untitled by dupont (@dupontcodepen) on CodePen.

Selectors !


Le saviez vous : Vous pouvez sélectionner un élément input tout simplement par son nom.

  

Les éléments comme div non pas de nom, il faut généralement utiliser un id ou une class pour les identifier. Mais, il existe les attributs de données

Mon programme de L2 !

Amusez vous à changer le cours de l'histoire en modifiant le code JS §

See the Pen Test election template by dupont (@dupontcodepen) on CodePen.

the winner is : flex

Nous avions lors du TD-8 imaginez un placement utilisant flex !

C'est ce type de placement qu'à utilisé le journal le parisien pour les résultats de Premier tours des élections. Génial !


https://www.leparisien.fr/resultats-elections/


Positionning !

 



Testez votre connaissance : ici

Test : positionnement

 Dessinez la vue 3D des codes suivants

html

css

    <section>

        <div class="A">item 1</div>

        <div class="B">item 2</div>

        <div class="C">item 3</div>

    </section>


section>div:nth-child(1) {

}


section>div:nth-child(2) {

    position: absolute;

}


section>div:nth-child(3) {

    position:relative;

}

 

html

css

<section>

        <div class="A">

            <p>AAAAAA</p>

        </div>

        <div class="B">

            <p>BBBBBB</p>

        </div>

        <div class="C">

            <p>CCCCCC</p>

        </div>

</section>

section {

    position: relative;

    width: 30vw;

}


section>div:nth-child(2) {

    z-index: 1;

    position: absolute;

}


section>div:nth-child(3) {

    z-index:2;

    position:relative;

}


div {

    position: relative;

}


html

css

    <section>

        <div class="A">

            <p>AAAAAA</p>

        </div>

        <div class="B">

            <p class="alert">BBBBBB</p>

        </div>

        <div class="C">

            <p>CCCCCC</p>

        </div>

    </section>



p.alert {

    z-index:1000;

    position:relative;

}


section {

    position: relative;

    width: 30vw;

}


section>div:nth-child(1) {

}


section>div:nth-child(2) {

    z-index: 1;

    position: absolute;

}


section>div:nth-child(3) {

    z-index:2;

    position:relative;

    background: black;

    color: white;

}


div {

    position: relative;

}


p {

    margin:0;

}


Selecteur

 

Simulateurs

TD 10 : correction du DS

  

Indiquez la figure numéro de 1 à 8 (de G à D) correspondante à la sélection (0 si aucune correspondance)

.top  :nth-child(2)

 

ul:not(#b) 

 

li.B + *

 

:last-child 

 

ul:first-child

 

ul li

 

.A.B, ul ~ :last-child 

 

Donner le CSS pour obtenir le comportement du menu

La souris est sur COURS


COURS

    HTML

    CSS

TD

La souris est sur CSS.


COURS

    HTML

    CSS

        CSS1

        CSS2

TD

Donner le CSS pour obtenir le résultat : 

    <section class="poem">

        <nav>...</nav>

        <h1>titre</h1>

        <p>Lorem</p>

    </section>

 

Pied de page

 <div class="top">

          <h1>h1</h1>

          <ul>

             <li class="A B" id="item.A"></li>

             <li class="A" id="b"></li>

             <li class="B" id="c"></li>

          </ul>

          <footer> footer </footer>

</div>