Etude de cas

Exemple à étudier

→Jolie menu

L'utilisation de la speudo-classe first( last ) est particulièrement efficace dans la construction de menu. 
Elle permet de distinguer le premier (dernier) élément de la liste et de lui affecter un style particulier.

La figure ci-dessus montre le résultat de l'application d'un bord arrondi au lien du premier élément de la liste du menu.

 nav    li :first-child    a  {




    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 0;

    border-top-left-radius: 10px;

    border-top-right-radius: 0;

}

La couleur fait correspondre à notre expression des besoins en français avec l'expression traduite en CSS !

quizz

Travail perso : Les selecteurs

• A
  • ::after / ::before
  • Adjacent sibling
  • [attribute]
• C
  • :checked
  • Child
  • Class
• D
  • :default
  • :disabled
  • Descendant
• F
  • ::first-letter
  • ::first-line
  • :first-child
• G
  • General sibling
• H
  • :hover
• I
  • :invalid
  • ID
• L
  • :last-child
  • :last-of-type
• N
  • :not(s)
  • :nth-child
  • :nth-last-child
  • :nth-last-of-type
  • :nth-of-type
• P
  • ::placeholder
• R
  • :required
• V
  • :valid

Plan du cours

• Environnements
• Editeurs
• HTML
• CSS
• Selecteurs

Cours en ligne : UDACITY

Voir cours !

introduction

 

Exemple quizz

Projet : EXPERTISE DE SITE

Pourquoi ne pas parler d'un site qui vous concerne en premier lieu ; celui de votre université : Université d'Evry

Comparaison

Rendez vous sur le site vu en cours : https://vincennes1900.blogspot.com/ et cliquez sur un sujet.

L'ascenseur sur le coté est bloqué, cela vous permet de vous consacrer sur le sujet cliqué.

la vidéo suivante montre que l'on ne peut plus utiliser l'ascenseur de la page (reste actif celui du message).

Faite l'expérience sur le site de l'université en cliquant sur l'icone recherche. L'ascenseur reste présent. De plus, un simple clique sur le fond noir ne permet pas de le supprimer.

Navigateur !

Un éditeur ne vous ai pas imposé.

Voici une proposition : →Visual Studio

Vous y retrouvez la magie d'EMMET.

HTML