Exercices HTML CSS

Exercice 8 HTML et CSS Corrigé

Réaliser la page suivante en utilisant des compteurs.

La France en Finale de l’Euro

 

Euro 1984 en France

Rang 1 en 1984 : France

Rang 2 en 1984 : Espagne Euro 2000 au Bénélux

Rang 1 en 2000 : France

Rang 2 en 2000 : Italie Euro 2016 en France

Rang 1 en 2016 : Portugal

Rang 2 en 2016 : France

HTML :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Championnat d'Europe des nations </title>
<link rel="stylesheet" type="text/css" href="../css/exercice04compteur.css" /> </head>
<body>
<h1>La France en finale de l'Euro</h1>
<ol>
<li> en France
<ol>
<li> France
</li>
<li> Espagne
</li>
</ol>
</li>
<li> au B&eacute;n&eacute;lux
<ol>
<li> France
</li>
<li> Italie
</li>
</ol>
</li>
<li> en France
<ol>
<li> Portugal
</li>
<li> France
</li>
</ol>
</li>
</ol>
<p>
<br /><br /><br />
</p>

</body>
</html>

CSS :

body {
/*background-color: #FFAAAA; */
}
h1{
 text-align:center;
 text-decoration : underline;
}
ol{
counter-reset : cpt1 1968;
list-style-type : none;
font-weight: 800;
}
ol li:before{
counter-increment : cpt1 16 ;
content : "Euro " counter(cpt1) " : " ;
}
ol ol{
counter-reset : cpt2;
list-style-type : none;
font-weight: normal;
}
ol li ol li:before{
counter-increment : cpt2 ;
content : "Rang " counter(cpt2) " en " counter(cpt1) " : " ;
}

 

Ajouter un commentaire

Veuillez vous connecter pour ajouter un commentaire.

Pas encore de commentaires.