Ul type

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI — нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.

Хочу напомнить вам, что мы уже успели рассмотреть язык Html и валидатор W3C, как задаются цвета в коде вебстраниц, успели поговорить про основы современной верстки, а так же верстки табличной (тут). Кроме этого мы затронули основы формирования директивы Doctype и оформление комментариев в коде, ну и узнали как вставить в Html картинку через тег Img.

Маркированные списки на основе тэгов UL и LI

Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.


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

Давайте посмотрим, например, маркированный вариант, который может выглядеть так:

Ul type

  • Первая строка
  • Вторая
  • Последний элемент

Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).

Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

  1. <ul type=»disc»> — закрашенный кружок (по умолчанию);
  2. <ul type=»circle»> — не закрашенный кружок;
  3. <ul type=»square»> – квадрат

В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

Пример маркированного списка с различными типами маркера для каждого пункта:

Ul type

  1. Маркер в виде закрашенного диска
  2. Маркер в виде не закрашенного диска
  3. Квадрат

Нумерованные списки в Html на основе тэга OL

Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.

Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:

Ul type

  1. Первая строка
  2. Второй пункт
  3. Третья строка

Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

  1. <ol type=»1″> — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
  2. <ol type=»A»> — заглавные буквы в качестве нумерации;
  3. <ol type=»a»> — строчные буквы;
  4. <ol type=»I»> — заглавные римские цифры;
  5. <ol type=»i»> — строчные римские цифры;

Пример нумерованного списка с различными типами нумерации для каждого пункта:

Ul type

  1. с нумерацией большими римскими цифрами
  2. Нумерация маленькими латинскими буквами
  3. Нумерация малыми римскими цифрами

При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:

Ul type

  1. Первый элемент, номер которого задан в теге OL атрибутом start=»23″
  2. Следующий пункт, с номером на единицу большим
  3. Еще на единицу больше

Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:

Ul type

  1. Первый пункт с номером один
  2. Этот элемент получит номер, указанный в атрибуте value=»32″
  3. Пункт с большим номером

Оформление внешнего вида списков в CSS (таблицах стилей)

Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства.

В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position).

Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.

<ul classs="vash_class"> <li>Первый пункт</li> <li>Второй</li> <li>Последний</li> </ul>

Но а о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка —
Ul type, для вложенных пунктов ненумерованного — Ul type.

ktonanovenkogo.ru

Маркированные HTML списки — теги ul и li

Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным.

   &lt;ul&gt;   &lt;li&gt;1 элемент маркированного списка&lt;/li&gt;   &lt;li&gt;2 элемент маркированного списка&lt;/li&gt;   &lt;li&gt;3 элемент маркированного списка&lt;/li&gt;   &lt;/ul&gt;
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

   &lt;ul&gt;   &lt;li type=&quot;disc&quot;&gt;1 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;disc&quot;&gt;2 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;disc&quot;&gt;3 элемент маркированного списка&lt;/li&gt;   &lt;/ul&gt;
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
   &lt;ul&gt;   &lt;li type=&quot;circle&quot;&gt;1 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;circle&quot;&gt;2 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;circle&quot;&gt;3 элемент маркированного списка&lt;/li&gt;   &lt;/ul&gt;

  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
   &lt;ul&gt;   &lt;li type=&quot;square&quot;&gt;1 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;square&quot;&gt;2 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;square&quot;&gt;3 элемент маркированного списка&lt;/li&gt;   &lt;/ul&gt;
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type.


   &lt;ul&gt;   &lt;li type=&quot;disc&quot;&gt;1 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;circle&quot;&gt;2 элемент маркированного списка&lt;/li&gt;   &lt;li type=&quot;square&quot;&gt;3 элемент маркированного списка&lt;/li&gt;   &lt;/ul&gt;
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка

Нумерованные HTML списки — теги ol и li

Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры
   &lt;ol&gt;   &lt;li type=&quot;A&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;A&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;A&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;

  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
   &lt;ol&gt;   &lt;li type=&quot;a&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;a&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;a&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
   &lt;ol&gt;   &lt;li type=&quot;I&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;I&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;I&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

   &lt;ol&gt;   &lt;li type=&quot;i&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;i&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;i&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
   &lt;ol&gt;   &lt;li type=&quot;1&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.

   &lt;ol reversed&gt;   &lt;li type=&quot;1&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

   &lt;ol start=&quot;5&quot;&gt;   &lt;li type=&quot;1&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;1&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка
   &lt;ol start=&quot;4&quot;&gt;   &lt;li type=&quot;I&quot;&gt;1 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;I&quot;&gt;2 элемент нумерованного списка&lt;/li&gt;   &lt;li type=&quot;I&quot;&gt;3 элемент нумерованного списка&lt;/li&gt;   &lt;/ol&gt;
  1. 1 элемент нумерованного списка
  2. 2 элемент нумерованного списка
  3. 3 элемент нумерованного списка

goldbusinessnet.com

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

Такой список представляет собой перечень «пронумерованный» каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.

Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

Пример кода для нумерованного списка: Результат: Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:

type=»A» — нумерация заглавными латинскими буквами (A, B, C).

type=»a» — нумерация прописными латинскими буквами (a, b, c).

type=»I» — нумерация большими римскими цифрами (I, II, III) .

type=»i» — нумерация маленькими римскими цифрами (i, ii, iii).

Пример кода с римскими цифрами: Результат: Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).

Пример кода: Результат: У тега <li&gt можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.

Пример кода: Результат:

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

В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

Пример кода для маркированного списка: Результат: По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:

type=»disc» — закрашенный кружочек.

type=»circle» — пустой кружочек.

type=»square» — закрашенный квадратик.

Пример кода для маркированных списков: Результат:

Списки определений

Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения — в теги <dd></dd>.

Пример кода списка определений: Результат:

Вложенные списки

Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.

Пример кода многоуровневого списка: Результат: Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы рассмотрим работу с изображениями.

www.site-do.ru

Маркированные списки (или ненумерованные списки)

Первый вид списка, который мы рассмотрим, это маркированный.

Ненумерованные списки — тег <ul>

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:

Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):

Элементы списка — тег <li>

Каждый элемент в списке обворачивают в отдельную пару тегов <li> </ li>. Часто можно обойтись и без <li>, но я бы рекомендовал придерживаться этого правила.

Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:

Отступ маркированного списка

Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.

Упорядоченный / нумерованный список — тег <ol>

Если вы хотите упорядочить элементы списка, тогда тег <ol> поможет в этом. По умолчанию он задает нумерованный список HTML:

что на выходе дает нам:

A. Элемент 1
B. Элемент 2
C. Элемент 3

Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

Начало нумерованного списка с определенного номера

Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.

Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!

К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:

Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть

Обратный порядок

Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed:

В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.

Многоуровневый маркированный список в HTML

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

Что дает нам:

• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня

Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.

1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня

Используйте нумерованные списки HTML на своих страницах.

www.internet-technologies.ru

1. Маркированные списки в HTML

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:

А вот так выглядит в браузере:

Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

Название маркера Значение атрибута "type" Пример списка
Маркеры в виде круга disc
  • Земля
  • Сатурн
  • Венера
Маркеры в виде незакрашенного круга circle
  • HTML
  • JS
  • CSS
Маркеры в виде квадрата square
  • Лужа
  • Озеро
  • Море

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

Рис. 1.2. Вид маркера для списка в виде окружности в браузере

1.3 Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

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

2. Нумерованные списки в HTML

В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>. Как это выглядит на практике:

Пример нумерованного списка:

Таким образом выглядит нумерованный список со стандартными настройками в браузере:

Рис. 2.1. Нумерованный список в браузере со стандартными настройками

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

Название маркера Значение атрибута "type" Пример списка
Маркеры в виде арабских чисел 1
  • Бадминтон
  • Бейсбол
  • Бокс
Маркеры в виде строчных латинских букв a
  • Джомолунгма
  • Чогори
  • Канченджанга
Маркеры в виде заглавных латинских букв A
  • Summit Plummet
  • Tantrum Alley
  • Insano
Маркеры в виде римских цифр в нижнем регистре i
  • Филиппинское море
  • Аравийское море
  • Коралловое море
Маркеры в виде римских цифр в верхнем регистре I
  • Красный
  • Зеленый
  • Синий

2.2 Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start". Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

Вот как это будет отображаться на реальном сайте:

Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

На изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.

Ну а сейчас перейдем к вложенным спискам HTML.

3. Как сделать многоуровневый (вложенный) список в HTML

Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по выпадающему меню на CSS3), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.

На примере моделей автомобилей мы построим многоуровневый список в HTML:

Обратите внимание, как выглядит многоуровневый список в браузере:

Рис. 3.1. Пример многоуровневого списка в HTML

Мы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута "type" мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

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

Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1 Как сделать список HTML в строку

Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее здесь):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5 Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

Чтобы закрепить полученную информацию, я рекомендую все действия проделать вручную. Попробовать разные маркеры для списков, создать нумерованные списки, а после перейти к многоуровневым (вложенным) спискам и поэкспериментировать с ними.

На этом со списками заканчиваем и переходите к следующему уроку по изображениям.

Больше практикуйтесь!

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector