Список в списке html: Как сделать вложенный список? | htmlbook.ru

Leave a Comment / Html / By /

Круглые скобки для нумерованного списка HTML с помощью CSS

  • Обычная нумерация
  • Сквозная нумерация
  • Неактуальный способ

По правилам русского языка после точки (.) первая буква следующего предложения пишется заглавной, а после круглой скобки — строчной. Несмотря на это довольно часто приходится наблюдать следующую картину при использовании нумерованных списков HTML: 1. один.
2. два.
3. три.

1) Один;
2) Два;
3) Три.

Конечно же так оформлять списки неправильно, но, в то же время, это дело автора …

Рассмотрим создание следующего списка средствами CSS: 1) один;
2) два;
3) три.

Обычная нумерация

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Обычная нумерация</title> <style> ol.with-parentheses { counter-reset: myCounter; list-style: none; } ol.with-parentheses > li::before { content: counter( myCounter ) ‘) ‘; counter-increment: myCounter; } </style> </head> <body> <h2>Обычная нумерация</h2> <h3>Первый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.
</li> </ol> <h3>Второй список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> </body> </html>
ol.with-parentheses {
	counter-reset: myCounter;
	list-style: none;
}
counter-reset: myCounter;
сбрасываем счётчик.
list-style: none;
скрываем стандартные номера / маркеры.
ol.with-parentheses > li::before {
	content: counter( myCounter ) ') ';
	counter-increment: myCounter;
}
content: counter( myCounter ) ') ';
добавляем перед каждым пунктом списка номер и круглую скобку с пробелом: ‘) ‘.
counter-increment: myCounter;
увеличиваем счётчик на единицу.

myCounter — это переменная счётчика, которой можно определить любое другое имя, состоящее из английских букв (a-z), арабских цифр (0-9) и знаков подчёркивания (_), причём в качестве первого символа переменной рекомендуется использовать букву.

Сквозная нумерация

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Сквозная нумерация</title> <style> ol.start { counter-reset: myCounter; } ol.with-parentheses { list-style: none; } ol.with-parentheses > li::before { content: counter( myCounter ) ‘) ‘; counter-increment: myCounter; } </style> </head> <body> <h2>Сквозная нумерация</h2> <h3>Первый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Второй список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Третий список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> <h3>Четвёртый список</h3> <ol> <li>один;</li> <li>два;</li> <li>три.
</li> </ol> </body> </html>

Для сброса нумерации нужно просто использовать класс start ещё раз.

Неактуальный способ

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Неактуальный способ</title> <style> ol.with-parentheses > li::before { content: ‘) ‘; margin-left: -10px; } </style> </head> <body> <h2>Неактуальный способ</h2> <ol> <li>один;</li> <li>два;</li> <li>три.</li> </ol> </body> </html>

Единственное отличие данного списка от вышеприведённых — это наличие точки (.) после номера пункта.

Добавив отступ влево (margin-left: -10px;) больше 10 пикселей (например, 14), можно добиться слияния точки с круглой скобкой:

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

Практическая работа_Word. Практическая работа № 3

Цель занятия: Изучение основных приемов оформления текста, в виде нумерованных, маркированных и многоуровневых списков

ТЕОРЕТИЧЕСКИЙ МАТЕРИАЛ:

Списки в Word можно сделать двумя способами:
      а) Сначала написать список, затем, оформить его;
      б) Сразу настроить Word и, затем, писать список. Он будет сразу оформляться.
      Виды списков в Word.
Список можно оформить маркерами – разными галочками, точками. Этот вид списка называется «Маркированный».
«Нумерованный список» – когда стоят числа, буквы у пунктов списка.
«Многоуровневый список» — когда создается структура списка, несколько уровней, разделов, т.д., выделенных отступами.
Рассмотрим все виды списков и как работать с ними. На закладке «Главная» в разделе «Абзац» есть три кнопки.      

Создание маркированного списка в Word.
Ставим курсор в то место страницы Word, где будет начало списка. На закладке «Главная» в разделе «Абзац» нажимаем на кнопку «Создание маркированного списка».

В Word 2007 – кнопка «Маркеры».
Кнопка на верхнем изображении обведена красным цветом.
Мы выбрали маркер – галочку. Эта галочка появилась в том месте, где стоял курсор. Все, Word настроен, осталось написать список.
      Внимание!
Новый пункт списка будет писаться тогда, когда мы нажмем на клавишу «Enter».


В этом списке мы нажали на клавишу «Enter» после точки за словом словами: «арбуз», « т.д.», «груша». В этом списке видно, что, пока, не нажмем клавишу «Enter» строчка в списке будет переходить ниже.
     

Можно настроить свой вид маркера, нажав на кнопку «Определить новый маркер» в диалоговом окне «Библиотека маркеров». Здесь можно выбрать другой символ в качестве маркера, картинку или шрифт. Например, мы выбрали маркер «Звездочку».Список получился такой.

Чтобы отменить маркер, например, закончили писать список, нажимаем кнопку «Нет» в диалоговом окне «Библиотека маркеров». Курсор должен стоять на той строчке, у которой нужно убрать маркер.


Или, ставим курсор после маркера перед словом, где маркер нужно убрать (например, перед словом «Груша») или на новой строке, и нажимаем клавишу на клавиатуре «Backspase» или нажимаем кнопку «Создание маркированного маркера».
Если нужно сделать из списка Word простой текст, убрать все маркеры списка сразу, то выделяем список и нажимаем кнопку «Создание маркированного списка».
Или нажимаем на стрелочку у кнопки «Создание маркированного списка» и выбираем из диалогового окна кнопку функции «Нет». Все маркеры удалятся, список приобретет вид простого текста.
    

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

      

Как создать нумерованный список в Word.
Действуем, как в первом варианте, только нажимаем кнопку функции «Создание нумерованного списка».

В Word  – кнопка «Нумерация».  Здесь можно выбрать цифры или буквы для списка.

Ход работы:

  1. Запустите текстовый процессор Microsoft Office Word 2010
  2. Создайте новый текстовый документ в своей папке на диске D: под именем Список_1.docx
  3. Запишите в столбик название всех времен года и месяцы в виде:
  1. Скопируйте список ниже 3 раза, отступив 2 строки
  2. Выделите первый список и щелкните на кнопке Нумерация группы Абзац на странице ленты Главная
  3. Выделите второй список и  щелкните на кнопке Маркеры группы Абзац на странице ленты Главная
  4. Для третьего списка задайте нумерацию римскими цифрами со скобкой
  5. Четвертый список сделайте маркированным символом – Y
  6. Сохраните файл
  7. Откройте файл Формат_2.docx из своей папки
  8. Задайте для всех абзацев документа нулевые отступы справа и слева и отступ первой строки 1,5 см. Выравнивание в заголовке – по центру, в тексте – по ширине.
  9. Сохраните файл как Список_2.docx в своей папке
  10. Скопируйте весь текст в файле Список_2.docx на второй лист.
  11. Для основного текста на первом листе задайте нумерацию начиная с цифры 5 и отформатируйте абзацы как это показано на рисунке ниже:
  1. Основной текст на втором листе промаркируйте символом ❄ как это показано на рисунке ниже:
  1. Сохраните файл Список_2.docx  

Задание для самостоятельного выполнения:

Создайте докумен по образцу  приведенному ниже. Сохраните файл в своей папке под именем Список_3.docx

Анализ результатов работы и формулировка выводов

В  отчете необходимо предоставить: в своей папке файлы: Список_1.docx, Списокя_2.docx, Список_3.docx

Списки в HTML5 — Справочник по HTML

Списки в HTML5 — Справочник по HTML

Элементы HTML, позволяющие создавать все виды списков

Поделиться этой страницей

Новинка! Вышла моя 44-страничная электронная книга « CSS за 44 минуты «! 😃

Получить сейчас →

Определяет элемент в списке определений .

Пример: Копировать

Интернет
Часть Интернета, содержащая веб-сайты и веб-страницы
HTML
Язык разметки для создания веб-страниц
УСБ
Технология улучшения внешнего вида HTML
 <дл>
  
Интернет

  
Часть Интернета, содержащая веб-сайты и веб-страницы

  
HTML

  
Язык разметки для создания веб-страниц

  
CSS

  
Технология улучшения внешнего вида HTML

Определяет список определений .

Пример: Копировать

Интернет
Часть Интернета, содержащая веб-сайты и веб-страницы
HTML
Язык разметки для создания веб-страниц
УСБ
Технология улучшения внешнего вида HTML
 <дл>
  
Интернет

  
Часть Интернета, содержащая веб-сайты и веб-страницы

  
HTML

  
Язык разметки для создания веб-страниц

  
CSS

  
Технология улучшения внешнего вида HTML

Определяет термин определения .

Пример: Копировать

Интернет
Часть Интернета, содержащая веб-сайты и веб-страницы
HTML
Язык разметки для создания веб-страниц
УСБ
Технология улучшения внешнего вида HTML
 <дл>
  
Интернет

  
Часть Интернета, содержащая веб-сайты и веб-страницы

  
HTML

  
Язык разметки для создания веб-страниц

  
CSS

  
Технология улучшения внешнего вида HTML

Определяет элемент списка в упорядоченном списке

    или ненумерованном списке
      .

      Пример: Копировать

      1. Шаг первый
      2. Шаг второй
      3. ????
      4. ПРИБЫЛЬ!!!
       <ол>
  
    • Шаг 1.
      • 
  
    • Шаг второй. 
      • 
  
    • ????
      • 
  
    • ПРИБЫЛЬ!!!
      •

      Пример: Копировать

      Мой список покупок:

      • Молоко
      • Хлеб
      • Шоколад
      • Больше шоколада
       
      Мой список покупок:
      
<ул>
  
    • Молоко
      • 
  
    • Хлеб
      • 
  
    • Шоколад
      • 
  
    • Еще шоколад
      •

    Определяет упорядоченный список .

    Пример: Копировать

    1. Шаг первый
    2. Шаг второй
    3. ????
    4. ПРИБЫЛЬ!!!
     <ол>
  
  1. Шаг 1.
    2. 
  
  2. Шаг второй.
    3. 
  
  3. ????
    4. 
  
  4. ПРИБЫЛЬ!!!
    5.
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять
    1. Один
    2. Два
    3. Три
    4. Четыре
    5. Пять

    Определяет ненумерованный список .

    Пример: Копировать

    Мой список покупок:

    • Молоко
    • Хлеб
    • Шоколад
    • Больше шоколада
     
    Мой список покупок:
    
<ул>
  
  5. Молоко
    6. 
  
  6. Хлеб
    7. 
  
  7. Шоколад
    8. 
  
  8. Еще шоколад
    9.

    Поделитесь этим элементом HTML

    Списки HTML (с примерами)

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

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

    Мы можем использовать три типа списков для представления различных типов данных в HTML:

    1. Ненумерованный список
      • Заказной список
        1. Список описаний

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

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

          В HTML мы используем тег

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

             
              
  
            • Яблоко
              • 
  
            • Оранжевый
              • 
  
            • Манго
              •

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

            Здесь

          • Apple
            • ,
          • Orange
            •  и
          • Mango
            •  — это список предметы.

            Дополнительные сведения о неупорядоченных списках см. на странице Неупорядоченные списки HTML .

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

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

              Тег

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

                 
                  
  
                1. Готово
                  2. 
  
                2. Установить
                  3. 
  
                3. Перейти
                  4.

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

                Здесь вы можете видеть, что элементы списка представлены числами для представления определенного порядка.

                Чтобы узнать больше об упорядоченных списках, посетите Нумерованные списки HTML .

                Список описаний

                Список описаний HTML используется для представления данных в форме имя-значение. Мы используем тег

                для создания списка определений, и каждый элемент списка описаний состоит из двух элементов:0091
                тег
              2. описание термина , представленного тегом

          Давайте рассмотрим пример,

           
          
  
          HTML
          
  
          Язык гипертекстовой разметки
          
  
          CSS
          
  
          Каскадные таблицы стилей
          
  
          JS
          
  
          JavaScript

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

          Поскольку список описаний включает определение термина, он также известен как список определений. Чтобы узнать больше о списке описаний, посетите Список HTML-описаний .

          Теги, используемые в списках HTML

          Тег Объяснение
          <ол> Определяет упорядоченный список.

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

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