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

Как сделать многоуровневый нумерованный список на html + css, чтобы многоуровневый список отображался в Word?

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация

ru.stackoverflow.com

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

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

Пример 1. Создание многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
 </head>
 <body>
  <ol>
   <li>Русская кухня
    <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
   <li>Кавказская кухня</li>
   <li>Прибалтийская кухня</li> 
  </ol>
 </body>
</html>

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

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

Рис. 1. Вид многоуровневого списка

Альтернативно можно использовать в качестве подпунктов латинские буквы или римские цифры (пример 2).

Пример 2. Представление многоуровневого списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Списки</title>
  <style>
   ol li { font-weight: bold;  /* Выделение пунктов */ }
   ol ol { list-style: lower-alpha;  /* Тип нумерации подпунктов */ }
   ol ol li { font-weight: normal;  /* Оформление подпунктов */ }
  </style>
 </head>
 <body>
   <ol>
    <li>Русская кухня
     <ol>
     <li>Уха бурлацкая</li>
     <li>Бабушкина тюря</li>
     <li>Растегай</li>
    </ol>
   </li>
   <li>Украинская кухня</li>
   <li>Молдавская кухня</li>
  </ol>
 </body>
</html>

Применение стилей также позволяет по-разному выделять и оформлять пункты и подпункты (рис. 2).

Выделение пунктов списка

Рис. 2. Выделение пунктов списка

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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 для работы сайта!

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

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

<ul>…</ul> обрамление маркированного списка;
<ol>…</ol> обрамление нумерованного списка;
<li>…</li> обрамление каждого элемента списка.

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

Изменить вид маркера списка можно с помощью стиля 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>

РЕЗУЛЬТАТ:

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

Для формирования открывающих и закрывающих типографских кавычек « и » использованы специальные символы &laquo; и &raquo;. Таблица всех специальных символов 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>…</dl> обрамление списка определений;
<dt>…</dt> обрамление термина;
<dd>…</dd> обрамление определения.
Пример списка определений
<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.


Автор: Шуркаев Александр Владимирович
Источник: Заметки HTML кодера

htmlweb.ru

Отправить ответ

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