Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Многоуровневые списки с помощью html и css

Многоуровневые списки с помощью html и css

galina2601 23-09-2019, 16:21 6 274 Уроки по CSS

Как создавать списки в HTML знают почти все. Это просто.


Списки бывают маркированные, нумерованные, многоуровневые.

Для маркированного списка используются теги UL и LI.

Вот, к примеру, самый простой маркированный список:

Списки

В браузере это выглядит следующим образом:


Списки

Маркер списка можно изменять с помощью атрибута TYPY тега UL.

<UL type=circle> - окружность;
<UL type=disc> - круг;
<UL type=square> - квадрат.



Если вам нужна помощь при создании сайтов или редактировании уже имеющихся шаблонов, вы можете найти помощь на сайте ws-helper.ru


Нумерованные списки создаются с помощью тегов OL и LI.

Пишем код:

Списки


Смотрим в браузере:

Списки


Точно так же, как и маркеры в маркированном списке, вид номера в нумерованном можно изменить с помощью атрибута TYPE тега OL.

<OL type="I"> - римские большие цифры;
<OL type="i"> - римские маленькие цифры;
<OL type="A"> - большие буквы английского алфавита;
<OL type="a"> - маленькие буквы английского алфавита.

Можно попробовать сделать многоуровневый список из разных видов номеров:



Неплохо, но хотелось бы иметь классический вид. 

Если попытаться сделать вложенный нумерованный список с обычными цифрами мы должны написать вот такой код:

Списки


Проверяем... Получается вот так:

Списки

Совсем не то что нужно. А хотелось бы иметь правильный многоуровневый список, который выглядит следующим образом:

1. Первый элемент списка

2. Первый элемент списка

    2.1. Второй уровень вложенности
    2.2. Второй уровень вложенности
    2.3. Второй уровень вложенности

3. Первый элемент списка

4. Первый элемент списка

5. Первый элемент списка

Так вот, для того,чтобы это сделать, нужно прописать следующий стиль для списков:

Списки

Та-да-да-дам!
Получилось то, что нужно!

Списки

Вот они! Волшебные строчки, которые нужно добавить в описание стилей:

ol { counter-reset: item }

li { display: block }

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

 

 

Кстати!

Эти строчки обеспечивают вывод любой вложенности списков, а не только второй.
Пишем, к примеру, вот так:
<ol>
<li>Один</li>
<li>Два
<ol>
<li>Два-Один</li>
<li>Два-Два
<ol>
<li>Два-Два-Один</li>
<li>Два-Два-Два</li>
</ol>
</li>
<li>Два-Три</li>
</ol>
<li>Три</li>
</ol>

Получаем вот такой список в браузере:





Похожие новости

  • Заработок в Интернете
  • Как сделать цвет маркера в списке отличающимся от основного цвета
  • Как подключить стили к HTML-документу. Урок 1
  • Создание форм средствами HTML
  • Урок 4. Создание списков

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив