Exercice 1/7

  • Observez le code des fichiers index.html et stylesheet.css ainsi que le résultat obtenu;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 1/7

Dans les quelques exercices qui suivent vous allez utilisez l'ensemble des sélecteurs que vous connaissez pour regrouper de façon distincte des éléments HTML, comme l'exemple qui est présenté ici.

Commentaires les mieux notés

14 Commentaires

  • emma.falcone74-73

    emma.falcone74-73

    Bonjour, quand j'appuie sur Soumettre rien ne se passe... Je n'ai ni message d'erreur, ni validation des exercices. Comment puis-je les valider ?

    le 10/03/2021 à 06h52

  • meriam

    meriam Admin

    Bonjour, le problème est réglé.

    le 10/03/2021 à 14h17

  • lea.weibel-50

    lea.weibel-50

    Dans le selecteur div, pourquoi faut-il mettre border: 2px solid black; sachant que chaque class défini sa propre valeur pour border ?

    le 11/02/2021 à 08h46

  • meriam

    meriam Admin

    Pour tous les div on a attribué la même bordure et vous pouvez redéfinir une bordure spécifique pour chaque classe ou id.

    le 12/02/2021 à 07h44

  • lea.weibel-50

    lea.weibel-50

    Arthur et Double Face ne peuvent ils pas être identifés uniquement par leur id ?

    le 11/02/2021 à 08h44

  • meriam

    meriam Admin

    Bonjour, ils peuvent être identifiés par un id (tout dépend des besoins)

    le 11/02/2021 à 10h13

  • fgave-27

    fgave-27

    Pourquoi les 'p' sont tous encadrés pas des 'div' ? Qu'est-ce que le 'div' apporte ? On ne pourrait pas simplement mettre les 'class' & 'id' au 'p' directement ?

    le 24/10/2020 à 12h04

  • meriam

    meriam Admin

    Bonjour, les deux cas sont possibles tout dépend des besoins, div est une balise générique qui permet de diviser une page en blocs.

    le 26/10/2020 à 14h24

  • Goazman

    Goazman

    border-radius:100%

    le 17/02/2020 à 15h11

Pour publier un commentaire, vous devez vous connecter.
index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Ce que vous allez réaliser</title> </head> <body> <div class="friend" id="best_friend"><p>Arthur</p></div> <div class="friend"><p>BatManu</p></div> <div class="friend"><p>Capitaine Liberté</p></div> <div class="friend"><p>Louis C.K.</p></div> <div class="friend"><p>Justice</p></div> <div class="family"><p>Maman</p></div> <div class="family"><p>Papa</p></div> <div class="family"><p>Frérot</p></div> <div class="family"><p>Soeurette</p></div> <div class="family"><p>La chose</p></div> <div class="enemy"><p>Ryu</p></div> <div class="enemy"><p>Ken</p></div> <div class="enemy"><p>Zelda</p></div> <div class="enemy"><p>Godzilla</p></div> <div class="enemy" id="archnemesis"><p>Double Face</p></div> </body> </html>
div { position: relative; display: inline-block; height: 100px; width: 100px; border-radius: 100%; border: 2px solid black; margin-left: 5px; margin-top: 5px; text-align: center; } div p { position: relative; margin-top: 40px; font-size: 12px; } .friend { border: 2px dashed green; } .family { border: 2px dashed blue; } .enemy { border: 2px dashed red; } #best_friend { border: 4px solid #00C957; } #archnemesis { border: 4px solid #cc0000; }
http://localhost:8080