Нумерованный многоуровневый список html: Многоуровневый список — Разметка текста — HTML Academy

Leave a Comment / Html / By /

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

Данный пример в браузере отображается, как многоуровневый нумерованный список, а в word как одноуровневый нумерованный список

<HTML>
            <HEAD>
                <STYLE>
					ol {
					/* убираем стандартную нумерацию */
					list-style: none; 
					/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
					counter-reset: li; 
					}
					li:before {
					/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
					counter-increment: li; 
					/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем.
 
  Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
					content: counters(li,".") ". "; 
					}
				</STYLE>
            </HEAD>
            <BODY>
			<ol>
			  <li>пункт</li> <!-1.->
			  <li>пункт           
				<ol>
				  <li>пункт</li> <!-2.1.->
				  <li>пункт</li> <!-2.2.->
				  <li>пункт
					<ol>
					  <li>пункт</li> <!-2.3.1.->
					  <li>пункт</li> <!-2.3.2.->
					  <li>пункт</li> <!-2.3.3.-> 
					</ol>
				  </li> <!-2.3.->
				  <li>пункт</li> <!-2.4.->  
				</ol>
			  </li> <!-2.->
			  <li>пункт</li> <!-3.->        
			  <li>пункт</li> <!-4.
  ->        
			</ol>
			</BODY>
        </HTML>
  • html
  • css
  • ms-word

6

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

как сделать в html, css

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

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

На одностраничных сайтах нумерованные, маркированные списки создаются средствами html.

Содержание

  1. Списки в html
  2. Html список нумерованный многоуровневый
  3. Теги для маркированного списка
  4. Советы копирайтерам по составлению списков
  5. Как оформлять списки в тексте
  6. Cписки в html wordpress
  7. Заключение

В коде html используют теги, чтобы оформить различного рода перечни и перечисления.

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

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

Три сферы использования пропиток для бетона:
<ol>
 	<li> промышленное строительство</li>
 	<li> дорожное строительство</li>
 	<li> гражданское строительство</li>
</ol>

Парные теги <ol> формируют нумерованный список, каждая строка начинается с тега <li>.

СТАТЬИ ПО ТЕМЕ:

Что такое стоп слова

Рерайтинг: что это такое, рерайт текста — что это?

Нейминг: что это такое, как заработать, придумывая названия

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

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.

Если какой-то пункт удалить, оставшиеся номера будут пересчитаны автоматически.

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

В создании html многоуровневого списка используют элементы с разными отступами. 

Пример разметки:

<ol>
 <li>овощи
  <ol>
 <li>капуста</li>
 <li>морковка</li>
 <li>лук</li>
  </ol>
 </li>
 <li>фрукты</li>
 <li>хлеб</li>
</ol>


Список второго уровня поместили внутрь тега <li>, только потом его закрыли.

Теги для маркированного списка

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

Пункты маркированного списка создаются тегами <li>.

<ul>
 	<li> сферы применения товара;</li>
 	<li> проблемы, решаемые с помощью данного продукта;</li>
 	<li> характеристики товара;</li>
 	<li> отзывы клиентов.
 
 
 </li>
</ul>


Браузеры формируют блоки списков автоматически, с такими атрибутами

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.


В маркированном списке html можно ставить галочки вместо маркеров точек.
В таблицу css поместите этот код

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}.


Тогда список будет выглядеть так

Так же как нумерованные, маркированные списки можно делать многоуровневыми.

Может ли многоуровневый список включать как нумерованные так и маркированные списки? Ответ: да. Вот пример разметки

<ol>
 <li>овощи
 <ol>
 <li>картошка</li>
 <li>морковка</li>
 <li>капуста</li>
 </ol>
 </li>
 <li>фрукты</li>
 <li>напитки</li>
</ol>
Надо добавить в стили код
ol ol{
 list-style-type: lower-alpha;
}

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

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

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

Что они могут объединять в списки? ОДНОТИПНЫЕ ХАРАКТЕРИСТИКИ:

  • области применения товара или услуги;
  • проблемы, которые решает этот продукт;
  • выгоды, преимущества, получаемые клиентом в случае покупки товара;
  • характеристики товара;
  • факты о товаре;
  • отзывы клиентов.

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

Вот пример списка на одностраничном сайте, его даже можно считать УТП. Его появление на первом экране полностью оправданно.

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

Как оформлять списки в тексте

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

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

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

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

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

Чтобы не повторяться, не нарушить принципы Seo, не попасть под фильтр Баден-Баден (переспам), ключевые слова заменяйте синонимами, либо хотя бы вставляйте стандартные названия не по порядку.

Вот плохой пример, над этим тестом надо серьезно поработать.

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

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

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

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

Cписки в html wordpress

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

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

Заключение

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

css — упорядоченный список HTML 1.1, 1.2 (вложенные счетчики и область действия) не работает

Я использую вложенные счетчики и область действия для создания упорядоченного списка:

 ol {
    сброс счетчика: пункт;
    отступ слева: 10px;
}
ли {
    дисплей: блок
}
ли: до {
    содержимое: counters(item, ".") " ";
    счетчик-инкремент: элемент
} 
 <ол>
    
  • один
    • 
    
  • два
    • 
    <ол>
        
  • два.один
    •  
    
        
  • два.два
    • 
        
  • два.три
    • 
    
    
  • три
    • 
    <ол>
        
  • три.один
    • 
        
  • три.два
    • 
        <ол>
            
  • три.два.один
    • 
            
  • три.два.два
    • 
        
    
    
  • четыре
    •

    Я ожидаю следующий результат:

     1. один
2. два
  2.1. два один
  2.2. два.два
  2.3. два три
3. три
  3.1 три.один
  3. 2 три.два
    3.2.1 три.два.один
    3.2.2 три.два.два
4. четыре

    Вместо этого я вижу это (неправильная нумерация) :

     1. один
2. два
  2.1. два один
  2.2. два.два
  2.3. два три
2.4 three 
  2.1 три.один
  2.2 три.два
    2.2.1 три.два.один
    2.2.2 три.два.два
2,3 четыре

    Понятия не имею, кто-нибудь видел, где что-то идет не так?

    Вот JSFiddle: http://jsfiddle.net/qGCUk/2/

    • html
    • css
    • html-списки

    0

    Снимите флажок «нормализовать CSS» — http://jsfiddle.net/qGCUk/3/ Используемый в нем сброс CSS по умолчанию устанавливает все поля и отступы списка на 0

    UPDATE http://jsfiddle.net/qGCUk/4/ — вы должны включить свои подсписки в свой основной 

  •  ол {
  сброс счетчика: пункт
}
ли {
  дисплей: блок
}
ли: до {
  содержимое: counters(item, ". ") " ";
  счетчик-инкремент: элемент
} 
     <ол>
  
  • один
    • 
  
  • два
    <ол>
      
  • два.один
    • 
      
  • два.два
    • 
      
  • два.три
    •
  • три <ол>
  • три.один
  • три.два <ол>
  • три.два.один
  • три.два.два
  • четыре

    • 6

    Используйте этот стиль для изменения только вложенных списков:

     ol {
    сброс счетчика: пункт;
}
пр > ли {
    счетчик-приращение: элемент;
}
ол ол > ли {
    дисплей: блок;
}
ол ол > ли: до {
    содержимое: counters(item, ".") ". ";
    поле слева: -20px;
}

    4

    Проверьте это:

    http://jsfiddle.net/PTbGc/

    Кажется, ваша проблема решена.

    Что отображается у меня (в Chrome и Mac OS X)

     1.  один
2. два
  2.1. два один
  2.2. два.два
  2.3. два три
3. три
  3.1 три.один
  3.2 три.два
    3.2.1 три.два.один
    3.2.2 три.два.два
4. четыре

    Как я это сделал

    Вместо: 

     
  • Элемент 1
    • 

  • Элемент 2
    • 
   <ол>
        
  • Подпункт 1
    • 
        
  • Подпункт 2
    •

    Сделать : 

     
  • Элемент 1
    • 

  • Элемент 2
   <ол>
        
  • Подпункт 1
    • 
        
  • Подпункт 2
    •

    0

    Отличное решение! С помощью нескольких дополнительных правил CSS вы можете отформатировать его так же, как список структуры MS Word с выступающим отступом первой строки:

     OL {
  сброс счетчика: пункт;
}
ЛИ {
  дисплей: блок;
}
ЛИ: до {
  содержимое: counters(item, ".") ".";
  счетчик-приращение: элемент;
  отступы справа: 10 пикселей;
  поле слева:-20px;
}

    2

    Это более простое и стандартное решение для увеличения числа и сохранения точки в конце.
    Даже если вы сделаете правильный CSS, он не будет работать, если ваш HTML неверен. см. ниже.

    CSS 

     ол {
  сброс счетчика: пункт;
}
ол ли {
  дисплей: блок;
}
ол ли: до {
  содержимое: counters(item, ".") ". ";
  счетчик-приращение: элемент;
}

    SASS 

     ол {
    сброс счетчика: пункт;
    ли {
        дисплей: блок;
        &:до {
            содержимое: counters(item, ".") ". ";
            счетчик-инкремент: элемент
        }
    }
}

    HTML Parent Child

    Если вы добавляете дочерний элемент, убедитесь, что он находится под родительским li .

    Не будет работать ✘

    Обратите внимание, что родительский li и дочерний ol li здесь индивидуальны, это не сработает.

     <ол>
    
  • Родительский элемент 1.
    •  
    <ол>
        
  • Ребенок
    • 
    
    
  • Родитель 2
    •

    Подойдет ✔

    Вам необходимо поместить дочерний элемент ol li внутри родительского li . Обратите внимание, что родитель li обнимает ребенка.

     <ол>
    
  • Родительский элемент 1 
        <ол>
            
  • Ребенок
    • 
        
     
    
  • Родитель 2
    •

    После просмотра других ответов я пришел к этому, просто примените класс вложенный-счетчик-список в корень ol тег:

    код sass: 

     ol.nested-counter-list {
  сброс счетчика: пункт;
  ли {
    дисплей: блок;
    &::до {
      содержимое: counters(item, ".") ". ";
      счетчик-приращение: элемент;
      вес шрифта: полужирный;
    }
  }
  пр {
    сброс счетчика: пункт;
    & > ли {
      дисплей: блок;
      &::до {
        содержимое: counters(item, ".") " ";
        счетчик-приращение: элемент;
        вес шрифта: полужирный;
      }
    }
  }
}

    код CSS :

     ol.nested-counter-list {
  сброс счетчика: пункт;
}
ol. nested-counter-list li {
  дисплей: блок;
}
ol.nested-counter-list li::before {
  содержимое: counters(item, ".") ". ";
  счетчик-приращение: элемент;
  вес шрифта: полужирный;
}
ol.nested-counter-listol {
  сброс счетчика: пункт;
}
ol.nested-counter-listol > li {
  дисплей: блок;
}
ol.nested-counter-listol > li::before {
  содержимое: counters(item, ".") " ";
  счетчик-приращение: элемент;
  вес шрифта: полужирный;
}
 
     ol.вложенный-счетчик-список {
  сброс счетчика: пункт;
}
ol.nested-counter-list li {
  дисплей: блок;
}
ol.nested-counter-list li::before {
  содержимое: counters(item, ".") ". ";
  счетчик-приращение: элемент;
  вес шрифта: полужирный;
}
ol.nested-counter-listol {
  сброс счетчика: пункт;
}
ol.nested-counter-listol>li {
  дисплей: блок;
}
ol.nested-counter-list ol>li::before {
  содержимое: counters(item, ".") " ";
  счетчик-приращение: элемент;
  вес шрифта: полужирный;
} 
     <ол>
  
  • один
    • 
  
  • два
    <ол>
      
  • два.один
    • 
      
  • два. два
    • 
      
  • два.три
    • 
    
  
  
  • три
    <ол>
      
  • три.один
    • 
      
  • три.два
        <ол>
          
  • три.два.один
    • 
          
  • три.два.два
    • 
        
      
    
  
  
  • четыре
    •

    И если вам нужен конечный . в конце счетчиков вложенного списка используйте это:

     ol.nested-counter-list {
  сброс счетчика: пункт;
}
ol.nested-counter-list li {
  дисплей: блок;
}
ol.nested-counter-list li::before {
  содержимое: counters(item, ".") ". ";
  счетчик-приращение: элемент;
  вес шрифта: полужирный;
}
ol.nested-counter-listol {
  сброс счетчика: пункт;
} 
     <ол>
  
  • один
    • 
  
  • два
    <ол>
      
  • два.один
    • 
      
  • два.два
    • 
      
  • два.три
    • 
    
  
  
  • три
    <ол>
      
  • три.один
    • 
      
  • три.два
        <ол>
          
  • три.два.один
    • 
          
  • три.два.два
    • 
        
      
    
  
  
  • четыре
    •

    Я думаю, что эти ответы слишком усложняют ситуацию. Если вам не нужна поддержка Internet Explorer, решение будет однострочным:

     ol > li::marker { content: counters(list-item, '.') '. '; } 
     <ол>
    
  • один
    • 
    
  • два
    • 
    <ол>
        
  • два.один
    • 
        
  • два.два
    • 
        
  • два.три
    • 
    
    
  • три
    • 
    <ол>
        
  • три.один
    • 
        
  • три.два
    • 
        <ол>
            
  • три.два.один
    • 
            
  • три.два.два
    • 
        
    
    
  • четыре
    •

    Дополнительную информацию см. на странице псевдоэлементов CSS ::marker и на странице Использование счетчиков CSS на справочном веб-сайте MDN по CSS.

    0

    Недавно я столкнулся с похожей проблемой. Исправление состоит в том, чтобы установить для свойства отображения элементов li в упорядоченном списке значение list-item, а не display block, и убедиться, что свойство display ol не является элементом списка. то есть

     li {отображение: элемент списка;}

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

    1

    Решение Moshe отличное, но проблема все еще может существовать, если вам нужно поместить список в div . (читай: сброс счетчика CSS во вложенном списке)

    Этот стиль может предотвратить эту проблему:

     ol > li {
    счетчик-приращение: элемент;
}

ol > li: первый ребенок {
  сброс счетчика: пункт;
}

ол ол > ли {
    дисплей: блок;
}

ол ол > ли: до {
    содержимое: counters(item, ".") ". ";
    поле слева: -20px;
} 
     <ол>
  
  • список не вложен в div
    • 


<час>

<дел>
  <ол>
  
  • вложен в div
    • 
  
  • два
    <ол>
      
  • два. один
    • 
      
  • два.два
    • 
      
  • два.три
    • 
    
  
  
  • три
    <ол>
      
  • три.один
    • 
      
  • три.два
        <ол>
          
  • три.два.один
    • 
          
  • три.два.два
    • 
        
      
    
  
  
  • четыре
    •

    Вы также можете установить сброс счетчика на li:before .

    1

    Спасибо всем выше за ответы!

    Поскольку мне нужно было решение RTL, я обнаружил, что это может решить эту проблему:

     ol.nested-counter-list li {
  дисплей: блок;
  unicode-биди: двунаправленное переопределение;
}

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

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но никогда не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

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

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

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

     

  <голова>
    Название документа
    <стиль>
      пр {
        сброс счетчика: пункт;
      }
      ли {
        дисплей: блок;
        цвет: #666666;
      }
      ли: до {
        содержимое: counters(item, ".") " ";
        счетчик-приращение: элемент;
      }
    
  
  <тело>
    <ол>
      
  • Элемент 1
        <ол>
          
  • Подэлемент 1
    • 
          
  • Подэлемент 2
    • 
          
  • Подэлемент 3
    • 
        
      
      
  • Элемент 2
    • 
      
  • Элемент 3
        <ол>
          
  • Подэлемент 1
    • 
          
  • Подэлемент 2
    • 
          
  • Подэлемент 3
    •

    Попробуй сам »

    Результат

    1. Элемент 1
      1. Подэлемент 1
      2. Подэлемент 2
      3. Подэлемент 3
    2. Элемент 2
    3. Элемент 3
      1. Подэлемент 1
      2. Подэлемент 2
      3. Подэлемент 3

    В приведенном выше примере мы установили для свойства display значение «block» для элемента

  • .

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

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