LabEx
ВходРегистрация

Счетчики вложенных списков с использованием CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим применение счетчиков CSS для создания собственных счетчиков списков. В частности, мы узнаем, как инициализировать и увеличивать переменные счетчика, а также как отображать значения этих переменных с использованием функции counters(). В конце этого практического занятия вы сможете создавать вложенные счетчики списков и настраивать внешний вид элементов списка с использованием CSS.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Счетчик

В ВМ уже предоставлены index.html и style.css.

Чтобы создать собственный счетчик списка, учитывающий вложенные элементы списка, следуйте шагам:

  1. Используйте counter-reset, чтобы инициализировать переменную счетчика (по умолчанию 0), имя которой является значением атрибута (например, counter).
  2. Используйте counter-increment для переменной счетчика для каждого элемента, который можно подсчитать (например, каждого <li>).
  3. Используйте counters(), чтобы отобразить значение каждой переменной счетчика в качестве части content псевдо-элемента ::before для каждого элемента, который можно подсчитать (например, каждого <li>). Второе значение, переданное в него ('.'), действует в качестве разделителя для вложенных счетчиков.

Вот пример HTML-кода:

<ul>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>
    Элемент списка
    <ul>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
      <li>Элемент списка</li>
    </ul>
  </li>
</ul>

Вот CSS-код для применения собственного счетчика списка:

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по счетчикам. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.