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

webref.ru

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

04:54 pm — HTML: Многоуровневые нумерованные списки как в MS Word

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

В это заметке я предлагаю поговорить о многоуровневых упорядоченных (нумерованных) списках (англ. multilevel ordered lists), а точнее их нумерации. Для наглядности рассмотрим следующий пример HTML-кода многоуровневого упорядоченного списка:

<ol>
  <li>Элемент 1</li>
  <li>Элемент 2<ol>
    <li>Элемент 2.1</li>
    <li>Элемент 2.2</li>
  </ol></li>
  <li>Элемент 3</li>
</ul>

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

Как вы видите, иерархия нумерации здесь не сохраняется. Список второго уровня имеет такую же нумерацию, как и родитель. Мне же хотелось добиться такого же результата как в MS Wors, где есть возможность форматирования многоуровневых списков:

Мой вариант решение поставленной задачи заключается в использовании счётчиков и автоматической нумерации через CSS-свойства. Выглядит это следующим образом:

ol>li{
  display:block;
}
ol{
  counter-reset:item;
}
ol>li:before{
  counter-increment:item;
  content:counters(item,".") ". ";
}

Разберём этот пример подробней.

• Для дочерних элементов списка (селектор: OL>LI) мы задаём свойство отображения как блок: display:block. Сделано это для того, чтобы убрать стандартные маркеры списка, их мы будем формировать самостоятельно.
• Для элемента списка OL мы устанавливаем идентификатор счётчика item, значение которого будет увеличиваться по мере отображения дочерних элементов LI.
• В начале (псевдоэлемент :before) дочерних элементов списка (селектор: OL>LI), используя свойство content, мы выводим инкрементированное, т.е. увеличенное стилевым свойством counter-increment, значение счётчика item. Обратите внимания, что для этого я использовал функцию counters(), которая позволяет вывести всю иерархию счётчиков, разделённых соответствующим значением, в моём случае это символ точки. В конце я вставил строку: «. » – что окончательно привело к нужному мне варианту формирования нумерации многоуровневого упорядоченного списка.

Обращаю ваше внимание и на то, что использование дочерних селекторов вроде OL>LI не слишком приветствуется с точки зрен

wmascat.livejournal.com

HTML списки

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

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

Списки определяются тегами:

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

Изменить вид маркера списка можно с помощью стиля list-style.

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

<ul>
    <li>Гоголь Н.В.
        <ul>
            <li>&laquo;Ревизор&raquo;</li>
            <li>&laquo;Тарас Бульба&raquo;</li>
            <li>&laquo;Мертвые души&raquo;</li>
        </ul>
    </li>
    <li>Толстой Л.Н.
        <ul>
            <li>&laquo;Война и мир&raquo;</li>
            <li>&laquo;Анна Каренина&raquo;</li>
            <li>&laquo;Воскресение&raquo;</li>
        </ul>
    </li>
</ul> 

РЕЗУЛЬТАТ:

• Гоголь Н.В.
  • «Ревизор»
  • «Тарас Бульба»
  • «Мертвые души»
• Толстой Л.Н.
  • «Война и мир»
  • «Анна Каренина»
  • «Воскресение»

Для формирования открывающих и закрывающих типографских кавычек « и » использованы специальные символы « и ». Таблица всех специальных символов HTML

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

<ol>
    <li>Гоголь Н.В.
        <ol>
            <li>&laquo;Ревизор&raquo;</li>
            <li>&laquo;Тарас Бульба&raquo;</li>
            <li>&laquo;Мертвые души&raquo;</li>
        </ol>
    </li>
    <li>Толстой Л.Н.
        <ol>
            <li>&laquo;Война и мир&raquo;</li>
            <li>&laquo;Анна Каренина&raquo;</li>
            <li>&laquo;Воскресение&raquo;</li>
        </ol>
    </li>
</ol>
 

РЕЗУЛЬТАТ:

1. Гоголь Н.В.
   1. «Ревизор»
   2. «Тарас Бульба»
   3. «Мертвые души»
2. Толстой Л.Н.
   1. «Война и мир»
   2. «Анна Каренина»
   3. «Воскресение»

Кроме маркированных и нумерованных списков существуют списки определений, каждый элемент которых состоит из пары: термин и определение.

Для создания списка определений предназначены теги:

Пример списка определений

<dl>
    <dt>Гоголь Н.В. (1809 - 1852)</dt>
    <dd>
        Русский прозаик, драматург, поэт, критик, публицист, признанный одним из
        классиков русской литературы. Происходил из старинного дворянского рода
        Гоголь-Яновских.
    </dd>
    <dt>Толстой Л.Н. (1828 - 1910)</dt>
    <dd>
        Один из наиболее широко известных русских писателей и мыслителей, почитаемый
        как один из величайших писателей мира. Происходил из дворянского рода,
        известного с 1351 года.
    </dd>
</dl>

РЕЗУЛЬТАТ:

Гоголь Н.В. (1809 — 1852)

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

Толстой Л.Н. (1828 — 1910)

Один из наиболее широко известных русских писателей и мыслителей, почитаемый как один из величайших писателей мира. Происходил из дворянского рода, известного с 1351 года.

Читать дальше: Ссылки html. Тег <a>

htmlweb.ru

Урок 7. Создание списков в html

Стандартный список 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

Многоуровневые списки как в MS Word

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Как с помощью HTML/CSS можно верстать многоуровневые нумерованные списки «как в ворде». В тот момент мне в голову пришел только извратный вариант использования list-style-image или background-image, где нумерация типа задавалась бы графикой. Дурацкая идея, конечно.

Но пару дней назад я вспомнил о некоторых замечательных CSS свойствах. Полистав спецификацию, я понял, что задача решаема, при этом будет сохранена семантика в HTML. Единственное (но самое важное!) ограничение — абсолютно правильно работает пример только в Opera 7.0. Я тестировал в более ранних версиях этого браузера (нумерация в списках нарушается), а также в Mozilla 1.0 и Internet Explorer 6.0 (априори не должно работать) — увы и ах. Возможно, в более свежих версиях Gecko-based браузеров всё хорошо, я не могу сказать.

Итак, смотрите в Opera 7.0 или Mozilla Firefox 2.0 следующий пример:

1. one
   1. one-one
      1. one-one-one
      2. one-one-two
      3. one-one-three
   2. one-two
   3. one-three
2. two
3. three
   1. three-one
   2. three-two
   3. three-three

Здорово, правда? Решается всё следующим CSS кодом (за основу взят пример на w3c.org):

ol>li{
display:block
}

ol>li:before{
content:counters(item,".") ". ";
counter-increment:item
}
ol{
counter-reset:item
}

Обратите внимание на пробел во фрагменте «. «. С его помощью мы создаём отступ между нумерацией и текстом. CSS 2 селекторы (ol>li) используются для того, чтобы не обрабатывались элементы вложенных ненумерованных списков.

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

<ol>
<li>one
    <ol>
    <li>one-one
        <ol>
        <li>one-one-one</li>

        <li>one-one-two</li>
        <li>one-one-three</li>
        </ol>
    </li>
    <li>one-two</li>
    <li>one-three</li>

    </ol>
</li>
<li>two</li>
<li>three
    <ol>
    <li>three-one</li>

    <li>three-two</li>
    <li>three-three</li>
    </ol>
</li>
</ol>

Теорию про счётчики и автоматическую нумерацию можно почитать в спецификации.

Danil Ivanov (Mash) предложил вариант для IE 5+ и Mozilla.

htmlweb.ru