liste des TDs

 

1. Editeur
2. Balises de base
3. Attribut
4. Sélecteur
5. Inspecteur
6. Projet
7. Flex box
8. Flexible
9. Empilement
10. DS
11. 12 Bootstrap

Pour aller plus loin :

 https://web.dev/learn/

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

Mon bootstrap !

Création de son Frame Work !

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>