Приветствую вас, дорогие друзья, на сайте Impuls-Web!
В этой статье я хотела бы вам показать, как можно сделать красивый нумерованный список HTML, который позволит вам украсить контент, и добавит некоторой индивидуальности для вашего сайта.
Навигация по статье:
Как будет выглядеть такой нумерованный список HTML, вы могли вдеть в большинстве моих статей. Так как я уже давно пользуюсь таким способом стилизации списков, и считаю, что такой вариант оформления намного интереснее, чем обычные серые цифры.
Код нумерованного списка HTML
Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.
Вот как выглядит код для измененного нумерованного списка HTML:
|
1 2 3 4 5 |
<ol class="num-list"> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol> |
Вы можете использовать данную заготовку HTML-кода, и css-стили, которые я покажу ниже, и использовать их у себя на сайте.
Перечисление может быть бесконечно длинным. Все, что вам нужно, это продублировать строки списка нужное количество раз, и исправить нумерацию, а так же добавить свой текст для пунктов.
CSS-стили нумерованного списка HTML
Далее нам нужно открыть в текстовом редакторе файл стилей нашего сайта и в самом конце дописать следующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; } .num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ } |
В первом фрагменте стилей с селектором .num-list li мы добавляем верхний и нижний отступ для пунктов, и убираем стандартную нумерацию.
Во втором фрагменте мы добавляем стилизацию для нашей нумерации. В частности, задаем фон, цвет цифр, внутренние отступы, задаем шрифт и радиус скругления углов для тега span.
Вот что у нас получилось:
- 1.Пункт 1
- 2.Пункт 2
- 3.Пункт 3
Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.
А на этом у меня, пожалуй, на сегодня все. Надеюсь, показанный в данной статье код для стилизации маркированных списков будут для вас полезны. Если данная статья вам понравилась, обязательно поделитесь ею в социальных сетях и оставьте свой комментарий.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Чаще всего приходится работать списками без классов, а это намного усложняет дело.
в этом случае можно обратиться к списку через родительский класс:
.имя-родительского-класса ol{}
Ну это ж придется все циферки вручную прописывать, а если потом этот список будет меняться в позициях и т.д. Не ко всем ordered lists такое решение подойдет. Но зато красиво.
Согласна! Приходится выбирать между красотой и удобством :)
На самом деле в CSS есть счетчики. Можно сделать и красиво и удобно! ;)