Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Непрерывная нумерация отдельных упорядоченных списков с помощью счетчиков CSS
Дата добавления: 20.12.2017 - 07:07
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 380
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
В данном материале мы покажем, как могут использоваться счетчики CSS для продолжения нумерации по отдельным спискам с использованием одного общего класса.
В примере указан один общий класс .continuous-list для всех списков, вот с ним мы и будем работать.
И так, вот наш список в HTML коде:
Ну а это собственно наш коротенький 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>
<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;
}
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;
}
Поделись с друзьями:
