Форма входа

Бесплатный раздел

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

Непрерывная нумерация отдельных упорядоченных списков с помощью счетчиков CSS

Дата добавления: 20.12.2017 - 07:07
Добавил: Buger
Количество просмотров: 380
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Непрерывная нумерация отдельных упорядоченных списков с помощью счетчиков CSS
БЕСПЛАТНО
рейтинг 0.0
/
голосов 0
В данном материале мы покажем, как могут использоваться счетчики CSS для продолжения нумерации по отдельным спискам с использованием одного общего класса.
В примере указан один общий класс .continuous-list для всех списков, вот с ним мы и будем работать.

И так, вот наш список в HTML коде:
Код
<h1>Список покупок</h1>

<p>Еда:</p>
<ol class="continuous-list">
  <li>Хлеб</li>
  <li>Яйца</li>
  <li>Яблоки</li>
  <li>Крупа</li>
  <li>Консервы</li>
  <li>Замороженная пицца</li>
  <li>Шоколад</li>
</ol>

<p>Напитки:</p>
<ol class="continuous-list">
  <li>Газированная вода</li>  
  <li>Молоко</li>
  <li>Пиво</li>
  <li>Вино</li>
</ol>

<p>Туалетные принадлежности:</p>
<ol class="continuous-list">  
  <li>Зубная паста</li>
  <li>Туалетная бумага</li>
  <li>Бритва</li>
  <li>Мыло</li>
</ol>


Ну а это собственно наш коротенький CSS код:
Код
.continuous-list {
  font-size: 1.8rem;
  font-weight: 400;
  padding-left: 1rem;
}

.continuous-list li {
  list-style: none;
}

.continuous-list li::before {
  content: counter(listCounter) ". ";
  counter-increment: listCounter;
}
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: