Списки

Создание списка

В HTML существует два вида списков. Первый вид — это маркированный список. Пример маркированного списка:

  • Элемент1
  • Элемент2
  • Элемент3

Для создания такого списка в HTML нужно написать следующий код:

1
2
3
4
5
<ul>
	<li>Элемент1</li>
	<li>Элемент2</li>
	<li>Элемент3</li>
</ul>
где теги <ul> — это обозначение маркированного списка, а <li> — элементы (пункты) списка. Обратите внимание, что закрывающий тег </ul> должен быть обязательно.

Второй вид списка — нумерованный. Пример нумерованного списка:

  1. Элемент1
  2. Элемент2
  3. Элемент3
Для создания такого списка необходимо в HTML ввести:
1
2
3
4
5
<ol>
	<li>Элемент1</li>
	<li>Элемент2</li>
	<li>Элемент3</li>
</ol>
Как видите, списки отличаются только начальными тегами.

Изменение внешнего вида списка с помощью CSS

Для изменения внешнего вида списка используем правила CSS. Особенностью спискоя является то, что они состоят из двух элементов:<ul> — мы используем для задания внешнего вида всего списка, а <li> — для задания внешнего вида пунктов списка. Например:

See the Pen ul li css by Alex (@luschenko) on CodePen.

Изменяем внешний вид маркеров списка

Для изменения маркеров списка используйте свойство list-style-type со значениями: disk, circle, square в теге <ul>. Например:

See the Pen ul li css by Alex (@luschenko) on CodePen.

Также, спискам и пунктам списка можно применять классы.

Убираем маркеры в списке

Для удаления маркеров в списке укажите для <ul> свойство list-style-type: none;

Выполнить

Задание 1. Используя списки, выполните верстку, указанную на рисунке ниже. Примечание также выполнено как список, но без маркеров.

рецепт каши

Задание 2. Скачайте архив. Распакуйте. В файле list1.html в коде допущены ошибки. Исправьте их так, чтобы результат вывода страницы был аналогичен изображению представленному ниже: