Списки в HTML. Многоуровневое меню.

Списки в HTML. Многоуровневое меню.

13 авг. 2017

Для того, чтобы упорядочить и систематизировать объемный текст используют списки. Они делают текст более читабельным. Списки бывают маркированными и нумерованными. Для того, чтобы добавить маркированный список, используют тег <ul>, для добавления нумерованного списка <ol>. После открытия тегов <OL > или <UL >, добавляют элементы списков -<li>. Именно в эти элементы и добавляют текст, изображения, ссылки. 

<ul> <li>Ячейка маркированного списка 1</li> <li>Ячейка маркированного списка 2</li> <li>Ячейка маркированного списка 3</li>
</ul>
<ol> <li>Ячейка нумерованного списка 1</li> <li>Ячейка нумерованного списка 2</li> <li>Ячейка нумерованного списка 3</li>
</ol>
  • Ячейка маркированного списка 1

 

  • Ячейка маркированного списка 2

 

  • Ячейка маркированного списка 3
    1. Ячейка нумерованного списка 1

 

    1. Ячейка нумерованного списка 2

 

    1. Ячейка нумерованного списка 3


Элементы маркированного и нумерованного списка имеют стандартные маркеры и нумерацию . Но это можно исправить, путем добавления атрибутов. Маркированный список имеет следующие атрибуты:

<ul> <li type="square">У устанавливает маркер в виде закрашенного квадрата</li> <li type="round">У устанавливает маркер в виде закрашенного круга</li> <li type="circle">У устанавливает маркер в виде не закрашенного круга</li>
</ul>

 

    • У устанавливает маркер в виде закрашенного квадрата

    • У устанавливает маркер в виде закрашенного круга

    • У устанавливает маркер в виде не закрашенного круга

У нумерованного списка также можно поменять нумерацию, используя следующие атрибуты:
<ol> <li type="A">Нумерация будет производиться большими буквами английского алфавита</li> <li type="a">Нумерация будет производиться малыми буквами английского алфавита</li>
</ol>

 

    1. Нумерация будет производиться большими буквами английского алфавита

 

    1. Нумерация будет производиться малыми буквами английского алфавита

Также можно изменить начло отсчета у нумерованного списка. Причем начло отсчета можно изменить и с атрибутами type="a" и type="A"

<ol type="a" start="4">
<li>Ячейка 1</li>
<li>Ячейка 2</li>
<li>Ячейка 3</li>
</ol>
    1. Ячейка 1

 

    1. Ячейка 2

 

    1. Ячейка 3

И в завершении урока изучим многоуровневые списки. Обычно они используются для создания меню сайта.

<ul>	<li>просто текст</li>	<li>Вставим ещё 1 контейнер	<ol>	<li>Внутренний ли 1</li>	<li>Внутренний ли 2</li>	</ol>	</li>
</ul>
    • просто текст

 

    • Вставим ещё 1 контейнер

        1. Внутрений ли 1

        1. Внутрений ли 2

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

Если статья понравилась, то поделитесь ей в социальных сетях:

Понравилась статья? Подпишись и будь в курсе всех новостей!

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных Политика конфиденциальности

Вам также будет интересно:

Комментарии (0)


    Vkontakte