Как сделать список в html

---

---

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

• <ol> – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
• <ul> – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
• <dl> – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

 

  
 <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

<ol type="A|a|I|i|1"> 

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

<li value="7">   

  
 

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ol style="list-style-type:lower-roman"> 

Стили оформления нумерованных списков

Пример	Значение	Описание
а, Ь, с	lower-alpha	Строчные буквы
А, В, С	upper-alpha	Прописные буквы
i, ii, iii	lower-roman	Римские цифры, набранные строчными буквами
I, II, III	upper-roman	Римские цифры, набранные прописными буквами

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

<ul>  <li>Первый пункт </li>  <li>Второй пункт </li>  <li>Третий пункт </li> </ul>

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

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

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

Любой список может быть вложен в другой. Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента <li> уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.

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

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ul style="list-style-type:square"> 

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

Значение	Описание
disc	маркер в форме кружков с заливкой
circle	маркер в форме кружков без заливки
square	маркер в форме квадрата с заливкой
none	пункты списка без маркера

В следующем примере рассмотрены различные стили оформления маркированных списков:

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

<ul style="list-style-image: url(images/Star.png);">

	Обратите внимание на размер картинки — он не должен быть слишком большим, обычно 10-25 пикселей.

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

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

<dl>  <dt>Первый термин</dt>  <dd>Описание первого термина</dd>  <dt>Второй термин</dt>  <dd>Описание второго термина</dd> </dl>  

  
 

В следующем примере показано одно из возможных использований списка определений:

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

	Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

---

wm-school.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В примере выше у нас двойная вложенность (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

Что такое списки в HTML, какие они бывают

Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.

Какие бывают списки?

• Нумерованный список;
• Маркированный список (не нумерованный);
• Многоуровневый список;
• Список определений;
• Выпадающий список.

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

Обратите внимание, список это не несогласованный набор словосочетаний-огрызков, отвечающих на разные вопросы обобщающего текста (которого как раз и нет в данном случае).

Пример:

Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

Пример:

Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.

Где применяются списки?

1. Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
2. Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
3. Многоуровневые списки используются для детализации информации отдельных элементов;
4. Список определений в HTML используется при необходимости форматирования словаря.

HTML-практикум ч.1: как сделать упорядоченный нумерованный список

Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).

Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.

Покажу на примере. Код:

Результат:

По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».

Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

TYPE может принимать значения:

• «A» — для нумерации A, B..
• «a» — для нумерации a, b..
• «I» — для нумерации I, II..
• «i» — для нумерации i, ii..
• «1» — для нумерации 1. 2. и далее по порядку.

Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.

Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.

Пример кода:

Результат:

HTML-практикум ч.2: маркированный список

Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).

Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.

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

Код:

Результат:

Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:

Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».

Код:

Результат:

HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».

Код:

Результат:

HTML-практикум ч.4: вложенный многоуровневый древовидный список

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

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

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

Я сделаю для вас один полноценный пример, чтобы наглядно показать, что и как.

Код:

Результат:

HTML-практикум ч.5: как сделать список определений

Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.

• <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
• <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
• <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

Такой список по умолчанию получается многоуровневым и древовидным.

Пример кода:

Результат:

Итог

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

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

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

Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.

blogwork.ru

Стандартный список html

Стандартный список — это такой список, в котором подпункты выделяются точками, независимо от их количества.

<ul>    <li>Первый элемент обычного списка</li>    <li>Второй элемент обычного списка</li>  </ul>

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

Нумерованный список — это список, в котором подпункты выделяются цифрами по порядку.

<ol>    <li>Первый элемент нумерованного списка</li>    <li>Второй элемент нумерованного списка</li>  </ol>

По умолчанию перечисление будет вестись с использованием чисел.
Однако можно изменять параметры нумерации. Для этого используем атрибут type и указываем нужное значение

A — заглавные латинские буквы (A, B, C)
a — прописные латинские буквы (a, b, c)
I — большие римские цифры (I, II, III)
i — маленькие римские цифры (i, ii, iii)
Пример нумерации списка с заглавными латинскими буквами

<html>  <head></head>  <body>    <ol type="A">    <li>Первый элемент</li>    <li>Второй элемент</li>  </ol>    </body>  </html>

В итоге браузер выведет

Список с определениями html

Список с определениями — это список, в котором подпункты (термин, слово) выделяются отдельно от самой расшифровки (трактовка, определение) переносом строки и отступом.

<html>  <head></head>  <body>    <!-- ЛОГИКА ЗАПИСИ -->  <dl>   <dt>Термин 1</dt>   <dd>Определение 1</dd>     <dt>Термин 2</dt>   <dd>Определение 2</dd>   </dl>    <!-- ПРИМЕРЫ -->  <dl>  <dt>HTML</dt>  <dd>Язык вёрстки</dd>    <dt>DOM</dt>  <dd>Объектная модель документа</dd>  </dl>    </body>  </html>

Пример готового кода

Привожу пример использования трёх список подряд списков.

<html>  <head></head>  <body>    <!-- Стандартный список с точками -->     <ul>       <li>Первый элемент обычного списка       <li>Второй элемент обычного списка     </ul>    <!-- Нумерованный список -->     <ol>       <li>Первый элемент нумерованного списка       <li>Второй элемент нумерованного списка     </ol>    <!-- Нумерованный список, с прописными латинскими буквами -->     <ol type="a">       <li>Первый элемент нумерованного списка       <li>Второй элемент нумерованного списка     </ol>    </body>  </html>

В браузере будет выведено

Пример списка с вложенными списками

В итоге урока хочу привести конструкцию из вложенных друг в друга списков списков.

<html>  <head></head>  <body>    <!-- Список с вложенными списками -->     <ul>       <li>Первый элемент обычного списка         <ol>          <li>Первый элемент нумерованного списка          <li>Второй элемент нумерованного списка         </ol>       <li>Второй элемент обычного списка       <li>Третий элемент обычного списка         <ol type="a">          <li>Первый элемент нумерованного списка          <li>Второй элемент нумерованного списка         </ol>     </ul>    </body>  </html>

Спасибо за внимание!

tradebenefit.ru

От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!

Базовая теория

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

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

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

Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

Многоуровневый список: как его делать?

Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.

Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.

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

В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

Кстати, вот так это выглядит:

Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.

Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

То есть мы использовали вложенный селектор. Свойство list-style-type: lower-alpha, поменяет нумераторы с цифр на строчные латинские буквы. Вообще значений у этого свойства много, но остальные можете посмотреть в справочнике.

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

Пока на этом мы остановимся, более интересный способ оформления я покажу вам позже с помощью css. А пока мы вернемся к маркированным спискам и создадим такой:

Отличие видно только в том, что в данном случае браузер изменил внешний вид маркеров у внутренних списков. Также в данном случае мы сделали список под каждый пункт. Вы должны понимать, что в html в принципе нет никакого лимита на кол-во вложенных списков. То есть вы можете создать их хоть 10-15 в одном списке. Единственная проблема, с которой вы столкнетесь – длинная и очень запутанная разметка, в которой трудно разобраться.

Изменяем маркеры для маркированного списка с помощью CSS

Если мы возьмем стандартное оформление списков, то, как видите, оно очень и очень скудное. В 99% процентов оно просто будет вас не устраивать и вы захотите его сменить. К счастью, для маркированных списков это сделать очень легко, так как есть свойство list-style-image, но я предлагаю использовать сокращенную запись и записать так:

Предварительно я нашел и поместил в папку нужную картинку, вот что получилось:

Как видите, маркер применился ко всем элементам списков. Селектором ul ul можно прописать для вложенных пунктов другой маркер, если вам это потребуется.

Конечно, наиболее оптимальный форматом картинки-маркера я считаю формат png. С его помощью вы можете подбирать не только квадратные маркеры. Да и вообще png-картинка будет лучше смотреться.

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

Убираем маркеры и нумераторы полностью

В некоторых случаях нужно просто убрать маркеры или нумераторы у списков, потому что их не должно быть по дизайну. Например, вертикальные и горизонтальные менюшки в 90% случаев делают именно через список. Соответственно, маркеры нам в таком меню ни к чему. Чтобы убрать, пишем так:

Либо в сокращенной записи – list-style: none.

Стилизуем нумерованный список

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

Далее в css напишем такой код, ниже я его объясню:

Самое главное то, какую красоту он создал:

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

Итак, львиная доля свойств прописана для селектора ol li:before. Во-первых, нам надо разобраться, как он работает. Псевдоэлемент before позволяет поместить любое содержимое перед указанным элементом. В нашем случае это все пункты нумерованных списков.

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

А теперь самое главное! Чтобы выставлялись правильные цифры в списках, нужно задать счетчик-инкремент для псевдоэлементов пунктов списка. Это делается строчкой:

Через двоеточие прописывается название счетчика. Оно может быть произвольным, не обязательно number. Хорошо, это мы просто задали счетчик, но пока его значение никак не выводится. Если вы изучали псевдоэлементы after и before, то знаете, что текстовое содержимое задается в них с помощью свойства content. Значит, пишем так:

Теперь в псевдоэлементах будет выводиться значение счетчика. В первом элементе – 1, во втором – 2. То есть то, что нужно для списка. Какие еще свойства я указал, чтобы завершить оформление? Например, border-radius – это закругление углов, box-shadow – небольшая тень, display: inline-block – очень важное правило, оно позволит псевдоэлементу отображаться на одной строке с контентом пункта li.

Но и это не все!) Вот такой код еще у нас прописан для нумерованных списков в целом:

Что он означает и для чего нужен? По сути, это сброс счетчика. То есть для каждого нумерованного списка значение будет сброшено до нуля и с него начнется отсчет. Если бы этого правила не было, то было бы вот что:

Как видите, у вложенного списка уже отсчет пошел бы неправильно, не с одного, а с двух. Ну и вообще все работало бы неверно. Так что обязательно добавляйте сброс счетчика для каждого отдельного счетчика.

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

Как видите, вам даже дизайнер может не понадобиться, чтобы сделать вполне себе симпатичные списки. Все упирается в ваши знания по css: чем их больше, тем проще вам создавать классное оформление любым элементам на веб-странице.

Короче, предлагаю вам серьезно взяться за изучение css3 и освоить еще десятки очень классных фишек, которые можно реализовать с помощью этой технологии. А обучение вы можете начать у нас, пройдя наш курс по CSS3, в котором раскрываются практически все нововведения этой версии.

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

webformyself.com

Виды маркированных списков.

1. Стандартный маркированный список.

Подобные списки также называют «неупорядоченными».

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

Выбор того или иного значка зависит только от Вашего вкуса.

Стандартный маркированный список создается при помощи тега <ul>.

Список с маркерами в форме окружности создается при помощи тега <ul type=»circle»>.

Ну, а список с квадратными маркерами создается при помощи тега <ul type=»square»>.

 <ul> <li>Маркированный список</li> <li>Маркированный список</li> <li>Маркированный список</li> </ul>  <ul type="circle"> <li>Маркированный список</li> <li>Маркированный список</li> <li>Маркированный список</li> </ul>  <ul type="square"> <li>Маркированный список</li> <li>Маркированный список</li> <li>Маркированный список</li> </ul> 

Однако многое зависит от браузера пользователя. В некоторых из них будут отображаться лишь маркеры определенного вида (независимо от того, что вы указали в коде).

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

2. Настраиваемый маркированный список.

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

К примеру, могут использоваться треугольники, звездочки различного цвета, стрелочки, галочки и так далее.

или

Такие конструкции не всегда являются HTML-списками, потому что они формируются не только при помощи специальных маркировочных тегов.

 <style>  ul {  list-style-image: url(Путь к картинке/1.png);  } </style> <ul>  <li>Настраиваемый маркированный список</li>  <li>Настраиваемый маркированный список</li>  <li>Настраиваемый маркированный список</li>  </ul> 

или

 <table class="browser"> <thead> <tr> <th>Browser</th> <th>.mp3</th> <th>.wav</th> <th>.ogg</th> </tr> </thead> <tbody> <tr> <td>Mozzila Firefox 3.6</td> <td></td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Opera 10.63</td> <td></td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Google Chrome 8.0</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>Apple Safari 5.0.3 (with QuickTime)</td> <td>✓</td> <td>✓</td> <td></td> </tr> <tr> <td>Microsoft IE 9 Beta</td> <td>✓</td> <td>✓</td> <td></td> </tr> </tbody> </table> <style type="text/css"> .browser, table.browser thead, table.browser tbody, table.browser th, table.browser td, table.browser tr, table.attribute thead, table.attribute tbody, table.attribute th, table.attribute td, table.attribute tr{ margin:5px auto 5px auto; padding:10px; border:2px solid #000000; table-layout:auto; border-collapse:collapse; vertical-align:middle; background: #e0e7ef; } article th{ background-color:#CCFF33; font-weight:bold; } </style> 

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

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

Другими словами, это упорядоченный список.

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

По умолчанию используются арабские цифры 1,2,3 и т.д., но также здесь могут использоваться римские числа и буквы латинского алфавита.

Для создания стандартного нумерованного списка (с арабскими цифрами) используется тег <ol>.

Создать список, в котором вместо цифр будут использоваться заглавные латинские буквы, можно так <ol type=»A»>.

Для создания нумерованного списка со строчными буквами используется тег <ol type=»a»>.

Список с римскими цифрами можно создать при помощи тега <ol type=»I»>.

  <ol>  <li>Нумерованный список</li>  <li>Нумерованный список</li>  <li>Нумерованный список</li> </ol>  <ol type="A">  <li>Нумерованный список</li>  <li>Нумерованный список</li>  <li>Нумерованный список</li> </ol>  <ol type="a">  <li>Нумерованный список</li>  <li>Нумерованный список</li>  <li>Нумерованный список</li> </ol> <ol type="I">  <li>Нумерованный список</li>  <li>Нумерованный список</li>  <li>Нумерованный список</li> </ol> 

Вы также можете начать нумерованный список не с первой позиции, а с той, с которой вам нужно.

Для этого используется специальный атрибут start, к примеру, <ol type=»I» start=»3″> (перечисление начнется с третьей позиции).

 <ol type="I" start="3">  <li>Нумерованный список</li>  <li>Нумерованный список</li>  <li>Нумерованный список</li> </ol> 

Нумерованные списки используют там, где имеет значение последовательность перечисляемых элементов.

4. Многоуровневый список.

Такой список обычно состоит из нескольких вложенных списков.

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

Формируется многоуровневый список так же, как и обычный.

То есть сначала создается основной список (каркас). Затем внутрь него начинают вставляться дополнительные списки. Причем в многоуровневом списке могут присутствовать сразу маркированные и нумерованные списки.

 <ol> <li>Многоуровневый список <ul> <li>Многоуровневый список</li> <li>Многоуровневый список</li> </ul> </li> <li>Многоуровневый список <ul> <li>Многоуровневый список</li> <li>Многоуровневый список</li> </ul> </li> <li>Многоуровневый список<br> </li> </ol> 

На этом примере наше знакомство с маркированными списками заканчивается.

Надеюсь, что данный пост был Вам полезен.

До новых встреч!

С уважением, Денис Черников!

sozdaiblog.ru

Виды списков

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

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

Практически каждый из них может содержать список в списке. HTML позволяет с легкостью создать сложные перечни той или иной информации за весьма короткое время.

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

Упорядоченный список

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

1. Иванов.
2. Петров.
3. Сидоров и т. п.

Задается такой список с помощью парных тэгов <ol> и </ol>. Начинается он с открывающего тэга <ol>, а заканчивается тэгом </ol>. Каждый новый элемент списка начинается с парного тэга <li> и заканчивается закрывающим </li>.

Теперь вы знаете, как сделать список HTML. Как видите, для этого достаточно запомнить всего два тэга.

Немного о параметрах тэга <ol> — type и start.

Первый задает тип нумерации – буквенный или цифровой. Может принимать такие параметры: A, a, I, i, 1.

Первые два значения задают нумерацию латинскими буквами – заглавными и строчными, вторые два — большими и маленькими римскими цифрами, последнее значение употребляется, если вы хотите, чтобы список был пронумерован арабскими цифрами.

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

Второй параметр — start — задает число, с которого и начинается нумерация списка.

Скажем также пару слов и о параметрах тэга <li>. У него их также два. Первый параметр value может изменять порядок нумерации. Причем он будет изменен до того момента, пока снова не будет прописан данный параметр (либо же до конца всего списка).

Второй параметр — type — поможет изменить тип нумерации для данного пункта. Довольно часто встречается вариант сложного списка. К примеру, возьмем приблизительный план сочинения:

1. Вступление.
2. Основная часть.
   а) мнение других;
   в) мое мнение;
   с) доказательства.
3. Выводы.

Создать такой список в списке HTML довольно просто. Достаточно написать один основной список, а затем создать в нужном месте второй из подпунктов, используя другую нумерацию. Вот пример кода, основанный на нашем списке:

• <ol type= «1»>.
• <li>1. Вступление</li>.
• <li>2. Основная часть</li>.
• </ol type= «А»>
• <li>мнение других </li>.
• <li>мое мнение</li>.
• <li>доказательства</li>.
• </ol>.
• <li>3. Выводы</li>.
• </ol>.

Неупорядоченный список

Второй вид списка — неупорядоченный. В нем не важно, в каком порядке идут элементы. Это может быть перечень чего угодно – покупок, гостей, книг и т. д.

Задается данный список с помощью парного тэга <ul> и </ul>. При этом каждый новый элемент начинается со все того же парного тэга <li> </li>.

Имеет всего один параметр — type, с помощью которого задается тип маркера. Маркер может быть кружочком — закрашенным или нет, а также закрашенным квадратом. Так, незакрашенный круг имеет значение disc, закрашенный — circle. Квадрат задается с помощью square.

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

Выпадающий список

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

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

Вскользь упомянем о тэгах, с помощью которых создается раскрывающийся список. HTML не обладает полноценным функционалом для создания данных списков. Отметим, что при работе с данным типом списков нужно знать не только основы разметки страниц, но и иметь понятие о стилях CSS и java-скриптах.

Сам список задается с помощью парных тэгов <select> </select>.

Каждый новый элемент начинается с парного тэга <option> </option>.

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

Выводы

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

fb.ru