HTML+CSS Создание списков

Уроки HTML+CSS: Списки

В данной записи мы с вами научимся создавать списки. Списки это полезный “материал” для сайта. С помощью списков вы можете сделать много уровневое меню или аккордеоны.

Списки в HTML делятся на 2 типа:

  1. Маркированный
  2. Нумерованный

Все виды списков имеют одинаковую структуру.

<тип списка>
   <li>Элемент списка</li>
</тип списка>

Маркированный список

Для создания маркированного списка используется тег <ul></ul>. Все элементы данного списка будут определяться простым маркером(точкой).

<ul>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <li>Третий элемент</li>
</ul>
  • Первый элемент
  • Второй элемент
  • Третий элемент

Нумерованный список

Для создания нумерованного списка используется тег <ol></ol>. Все элементы данного списка будут определяться нумерацией.

<ol>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <li>Третий элемент</li>
</ol>
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

Используя данную структуру вы можете можете делать списки с несколькими вложениями.

<ol>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <ul>
      <li>Элемент второго уровня</li>
      <li>Элемент второго уровня</li>
   </ul>
   <li>Третий элемент</li>
</ol>
  1. Первый элемент
  2. Второй элемент
    • Элемент второго уровня
    • Элемент второго уровня
  3. Третий элемент

Для создания меню с помощью списков, вам нужно внутри тегов <li> расположить теги <a> обозначающие ссылки.

Оставить комментарий

avatar
  Подписаться  
Уведомление о