Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Liste des étapes

Stylisez la liste ordonnée et les divs avec le numéro d’étapes en cercles

Sur cette page

Configuration de base

Modèle de liste d'étapes par défaut

  1. Texte de lien hypertexte pour le sujet/la tâche de l'étape 1

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Texte de lien hypertexte pour le sujet/la tâche de l'étape 2

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  3. Texte de lien hypertexte pour le sujet/la tâche de l'étape 3

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  4. Texte de lien hypertexte pour le sujet/la tâche de l'étape 4

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Visualiser le code 
<ol class="lst-stps">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Conception de liste d'étapes avec zéro en tête

Avec en-têtes

  1. L'en-tête va ici pour l'étape 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Vivamus porta turpis sed sapien posuere blandit. Phasellus faucibus quis augue hendrerit tincidunt.

  2. En-tête pour l'étape 2

    Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero.

    Duis euismod metus enim, id gravida nulla tincidunt eu. Vivamus rutrum nibh in dui pulvinar aliquam. Proin sit amet consectetur nisl, eget consectetur elit.

  3. En-tête pour l'étape 3

    Mauris ut consequat urna, sit amet interdum risus.Sed eu nulla ac nisl commodo laoreet nec eget ante.

    Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.

    Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus.

  4. En-tête pour l'étape 4

    Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.

Sans en-têtes

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Donec vitae dapibus turpis, in ultrices nisl. Phasellus et tristique diam. Sed a sem eget nisi vehicula tristique et sit amet elit. Duis id nibh in nisi varius facilisis. Mauris dictum nisl eros, eget sodales risus auctor nec. Praesent eget sem est. Quisque quis magna turpis.
  2. Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor. Praesent non justo venenatis, efficitur ex et, commodo libero. Duis euismod metus enim, id gravida nulla tincidunt eu. Ut finibus convallis mi. Aenean in fermentum nisi, eu commodo metus. Vivamus vestibulum tincidunt nisl, quis dictum ante volutpat at.
  3. Sed eu nulla ac nisl commodo laoreet nec eget ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tortor tellus. Proin tincidunt volutpat volutpat.
  4. Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.
Visualiser le code 
<ol class="lst-stps ld-zr">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Sous-listes (imbriquées)

Conception par défaut

  1. Texte de lien hypertexte pour le sujet/la tâche de l'étape 1

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. En-tête pour l'étape 2

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

    1. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2a

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    2. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2b

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    3. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2c

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  3. Texte de lien hypertexte pour le sujet/la tâche de l'étape 3

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  4. En-tête pour l'étape 4

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

    1. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 4a
    2. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 4b

Conception avec zéro en tête

  1. En-tête pour l'étape 1

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.

    1. En-tête pour la sous-étape 1a

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    2. En-tête pour la sous-étape 1b

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    3. En-tête pour la sous-étape 1c

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  2. En-tête pour l'étape 2

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  3. En-tête pour l'étape 3

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.

  4. En-tête pour l'étape 4

    Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
    1. Élément de liste 4 sous-élément 1
    2. Élément de liste 4 sous-élément 2
    3. Élément de liste 4 sous-élément 3
Visualiser le code 
//Conception par défaut
<ol class="lst-stps">
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>
//Conception avec zéro en tête
<ol class="lst-stps ld-zr">
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>

Conception rayée

Conception par défaut

  1. Texte de lien hypertexte pour le sujet/la tâche de l'étape 1

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Texte de lien hypertexte pour le sujet/la tâche de l'étape 2

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  3. Texte de lien hypertexte pour le sujet/la tâche de l'étape 3

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  4. Texte de lien hypertexte pour le sujet/la tâche de l'étape 4

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Conception avec zéro en tête

  1. En-tête pour l'étape 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum urna justo, porta ultrices purus blandit a. Nunc sed quam dolor. Mauris dictum nisl eros, eget sodales risus auctor nec. Praesent eget sem est. Quisque quis magna turpis.

  2. En-tête pour l'étape 2

    Aliquam gravida, lorem at finibus pulvinar, orci neque dignissim erat, eget ornare velit sem tincidunt lectus. Duis condimentum volutpat blandit. Phasellus non lacinia dolor, eu scelerisque est. Donec sed elementum odio. Sed molestie molestie tempor.

    Duis euismod metus enim, id gravida nulla tincidunt eu. Vivamus rutrum nibh in dui pulvinar aliquam. Proin sit amet consectetur nisl, eget consectetur elit. Ut finibus convallis mi. Aenean in fermentum nisi, eu commodo metus. Vivamus vestibulum tincidunt nisl, quis dictum ante volutpat at.

  3. En-tête pour l'étape 3

    Mauris ut consequat urna, sit amet interdum risus. Sed eu nulla ac nisl commodo laoreet nec eget ante.

    Quisque lorem tortor, cursus et pretium at, porta in risus. Donec ut placerat lorem. Curabitur neque ex, rutrum a justo sit amet, placerat viverra magna.

    Curabitur nunc dolor, molestie efficitur ullamcorper posuere, eleifend vitae lorem.

  4. En-tête pour l'étape 4

    Quisque id accumsan tellus. Nunc sed volutpat ligula, eget semper arcu. Cras bibendum leo leo, sit amet varius turpis fermentum vel. Phasellus dapibus, ipsum sed volutpat efficitur, est massa dapibus nunc, vel vestibulum mauris nisl ac elit. Aliquam ultricies dignissim ligula ac interdum. Curabitur finibus cursus elementum. Maecenas ullamcorper interdum viverra. Sed massa eros, sagittis ut ipsum eget, lobortis pharetra leo.

Visualiser le code 
//Conception rayée par défaut
<ol class="lst-stps stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>
//Conception rayée avec zéro en tête
<ol class="lst-stps ld-zr stps-strpd">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Conception rayée pour la sous-liste

Conception par défaut with one of the sub lists striped

  1. Texte de lien hypertexte pour le sujet/la tâche de l'étape 1

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. En-tête pour l'étape 2 (conception rayée ajoutée pour les sous-étapes)

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

    1. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2a

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    2. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2b

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    3. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 2c

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  3. Texte de lien hypertexte pour le sujet/la tâche de l'étape 3

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  4. En-tête pour l'étape 4 (no conception rayée ajoutée pour les sous-étapes)

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

    1. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 4a
    2. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 4b

Conception avec zéro en tête avec l'une des sous-listes rayée

  1. En-tête pour l'étape 1 (conception rayée ajoutée pour les sous-étapes)

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.

    1. En-tête pour la sous-étape 1a

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    2. En-tête pour la sous-étape 1b

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

    3. En-tête pour la sous-étape 1c

      Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  2. En-tête pour l'étape 2

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in.

  3. En-tête pour l'étape 3

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem.

  4. En-tête pour l'étape 4 (no conception rayée ajoutée pour les sous-étapes)

    Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei.
    1. List item 4 sub item 1
    2. List item 4 sub item 2
    3. List item 4 sub item 3
Visualiser le code 
//Conception par défaut avec l'une des sous-listes rayée
<ol class="lst-stps stps-strpd">
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub stps-strpd">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>
//Conception avec zéro en tête avec l'une des sous-listes rayée
<ol class="lst-stps ld-zr stps-strpd">
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub stps-strpd">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
  <li>...</li>
  <li>...
    <ol class="lst-stps-sub">
	 <li>...</li>
	 <li>...</li>
	 <li>...</li>
    </ol>
  </li>
</ol>

Attribut de début (start)

Le modèle de liste est personnalisé pour suivre la valeur de l'attribut start de 2 jusqu'au nombre 9.

Modèle de liste d'étapes par défaut

Dans cet exemple, la valeur de l'attribut start est de 3.

  1. Texte de lien hypertexte pour le sujet/la tâche de l'étape 1

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Texte de lien hypertexte pour le sujet/la tâche de l'étape 2

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  3. Texte de lien hypertexte pour le sujet/la tâche de l'étape 3

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  4. Texte de lien hypertexte pour le sujet/la tâche de l'étape 4

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Visualiser le code 
<ol class="lst-stps" start="3">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Débutant à l'étape 2

  1. Exemple sans titre débutant de l'étape 2.
  2. Exemple sans titre suivant l'étape 2, attendu à être l'étape 3.

Débutant à l'étape 4

  1. Exemple avec titre débutant de l'étape 4

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre suivant l'étape 4, attendu à être l'étape 5

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Débutant à l'étape 5

  1. Exemple avec titre et section débutant de l'étape 5

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre et section suivant l'étape 5, attendu à être l'étape 6

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Débutant à l'étape 6

  1. Exemple avec titre et section débutant de l'étape 6

    Lorem ipsum dolor sit amet, esse autem per ex, nec in magna lorem. Ea nec error scriptorem referrentur, patrioque torquatos conclusionemque pri in. Sed sint debitis ad, mazim vitae temporibus qui ut, vel erat ponderum efficiendi ei. In idque euismod sed.

    1. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 6a

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    2. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 6b

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

    3. Texte de lien hypertexte pour le sujet/la tâche du sous-étape 6c

      Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre et section suivant l'étape 6, attendu à être l'étape 7

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Débutant à l'étape 7

  1. Exemple avec titre et section débutant de l'étape 7

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre et section suivant l'étape 7, attendu à être l'étape 8

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Débutant à l'étape 8

  1. Exemple avec titre et section débutant de l'étape 8

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre et section suivant l'étape 8, attendu à être l'étape 9

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Débutant à l'étape 9

  1. Exemple avec titre et section débutant de l'étape 9

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

  2. Exemple avec titre et section suivant l'étape 9, attendu à être l'étape 10

    Utilisez des verbes d'action, ou énumérez simplement des mots-clés pour résumer les informations ou les tâches pouvant être accomplies sur la page vers laquelle il pointe

Détails de la page

Date de modification :