За создание списка отвечают теги ul, ol, li. Закрывающий тег обязателен.
Тэгом ul отмечается начало/окончание всего маркированного списка.
Тэгом ol отмечается начало/окончание всего нумерованного списка.
Тэгом li отмечается начало/конец отдельного элемента списка.
Обычный маркированный список. | |
---|---|
| < ul>< li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li>< /ul> |
Маркированный список с квадратами. | |
| < ul style="list-style: square;"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li>< /ul> |
Маркированный список с кружками. | |
| < ul style="list-style: circle;"> < li>пункт списка< /li> < li>пункт списка< /li> < i>пункт списка< /li> < /ul> |
Цветной маркированный список. | |
| < ul style="list-style: square; font-size: 18px; color: #1cac78;"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ul> |
Маркированный список с выносом маркера за текст. | |
| < ul style="list-style: square outside;"> < li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul> |
Маркированный список с маркером в тексте. | |
| < ul style="list-style: square inside;">< li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.< /li>< /ul> |
Многоуровневый маркированный список. | |
| < ul> < li>Пункт 1.< /li> < li>Пункт 2. < ul> < li>Подпункт 2.1.< /li> < li>Подпункт 2.2. < ul> < li>Подпункт 2.2.1.< /li> < li>Подпункт 2.2.2.< /li> < /ul> < /li> < li>Подпункт 2.3.< /li> < /ul> < /li> < li>Пункт 3.< /li>< /ul> |
Обычный нумерованный список. | |
---|---|
| < ol> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с нужного числа. | |
| < ol start="8"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Цветной нумерованный список. | |
| < ol style="color: #1cac78;"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с римскими цифрами. | |
| < ol type="I"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с римскими цифрами с нужного числа. | |
| < ol type="I" start="8"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с маленькими римскими цифрами. | |
| < ol type="i"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с буквами. | |
| < ol type="А"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Нумерованный список с маленькими буквами. | |
| < ol type="а"> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < li>пункт списка< /li> < /ol> |
Многоуровневый нумерованный список. | |
| < ol> < li>Пункт 1.< /li> < li>Пункт 2. < ol>< li>Подпункт 2.1.< /li> < li>Подпункт 2.2.< /li> < li>Подпункт 2.3. < ol> < li>Подпункт 2.3.1.< /li> < li>Подпункт 2.3.2.< /li> < li>Подпункт 2.3.3.< /li> < /ol>< /li> < li>Подпункт 2.4.< /li> < /ol>< /li> < li>Пункт 3< /li> < li>Пункт 4< /li> < /ol> |
Нумерованный список с обратным порядком чисел. | |
| < ol reversed> < li>Декабрь< /li> < li>Ноябрь< /li> < li>Октябрь< /li> < li>Сентябрь< /li> < li>Август< /li> < li>Июль< /li> < li>Июнь< /li> < li>Май< /li> < li>Апрель< /li> < li>Март< /li> < li>Февраль< /li> < li>Январь< /li> < /ol> |
Примечание к кодам: если после вставки вашего списка в текст его начинает через чур разрывать, как в примере:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- пункт списка
- пункт списка
- пункт списка
- пункт списка
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
< ol>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< li>пункт списка< /li>
< /ol>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>
то надо код списка выстроить в одну строку. Естественно, после заполнения его, чтобы не запутаться.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
- Калина
- Малина
- Клубника
- Ежевика
< i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.< ol>< li>Калина< /li>< li>Малина< /li>< li>Клубника< /li>< li>Ежевика< /li>< /ol>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.< /i>