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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

1. 18 июля
   1. Написать статью
   2. Почитать книгу 1 час
   3. Сходить в кино
2. 19 июля
3. 20 июля

Почитать книгу 1 час

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

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

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

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

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

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

ol ol{ list-style-type: lower-alpha; }

list-style-type: lower-alpha;

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

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

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

• Овощи
  • картофель
  • перец
  • морковь
• Фрукты
  • яблоки
  • бананы

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

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

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

ul{ list-style: url(marker.jpg); }

list-style: url(marker.jpg);

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

ol или ul{ list-style-type: none; }

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

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

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

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

ol{ list-style-type: none; counter-reset: number; } ol li{ font-size: 18px; } ol li:before { color: #fff; background: #62CB91; display: inline-block; text-align: center; margin: 3px 3px; line-height: 22px; width: 22px; height: 22px; counter-increment: number; content:counter(number); border-radius: 3px; box-shadow: 2px 2px 0 0 #ccc; }

counter-increment: number; box-shadow: 2px 2px 0 0 #ccc;

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

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

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

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

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

counter-increment: number;

counter-increment: number;

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как Сделать Список в HTML? Ответ на (100%) Примеры!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Сейчас Вы узнаете, как сделать список в html для сайта. Это будет полезно как для новичков, так и для всех кому нужно узнать все о создании списков в html. Если Вас интересует данная тема, то приступим?! Поехали ...

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

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

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

Вы начинающий вебмастер? Тогда Вам просто необходимо знать сервис, который поможет создать и продвинуть сайт с нуля - http://profi-site.info/sozdanie-sajtov-v-adlere.html

Разделяются все списки по классам или видам на:

1. Маркированные списки в html 2. Нумерованные списки в html 3. Выпадающие списки в html 4. Списки определений в html

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

Как делают маркированные списки в html?

Данного вида списки в html создаются при помощи тега ul, который и будет отвечать за маркировку создаваемого списка.

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

и соответственно, закрывающийся тег

. Например создадим вот такого вида маркированный список:

• Строка маркированного списка в html первая
• Строка маркированного списка в html вторая
• Строка маркированного списка в html третья
• Строка маркированного списка в html четвертая

Создание списков в HTML

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

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

Виды HTML списков

В HTML существует три вида списков:

1. Маркированный список html. За его отображение отвечает тег ul. То есть текст, расположившийся между открывающимся

и закрывающимся

тегом, будет относиться к маркированному списку.

В свою очередь внутри тега

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

    Тег

    может содержать внутри себя следующие параметры:

    Указанный параметр type можно использовать для тега

    • , но он будет активен только для конкретного пункта меню.

      При желании установить какой-то особый маркер можно вместо привычного тега

    • применять тег в результате чего напротив пункта будет отображаться изображение.

      2. Нумерованный список html. За отображение и вывод данного HTML списка отвечают парные теги

      …

      Для создания каждого пункта списка, так как и в вышеприведенном примере используется элемент

    • Тег

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

      Как создать список HTML? Очень просто!

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

      Общая информация

      Список HTML используется довольно часто. Так как он позволяет быстро и эффективно представить в удобной форме нужную информацию пользователям. Существует два вида списков: упорядоченный и неупорядоченный. Их структура остается одинаковой. Различие составляет только то, что упорядоченный список использует в качестве маркеров цифры, которые идут по порядку. Далее будем рассматривать каждый вид в отдельности.

      Упорядоченный

      Такой список HTML начинается с тега

      и заканчивается закрывающим элементом
      . Тег
      полностью поддерживается всеми современными браузерами, операционными системами и платформами. Для обозначения элемента списка используйте тег
      1. . Очень часто такой вид разметки называют нумерованным. Хотя при этом в качестве маркера могут использоваться не только цифры, а, например, буквы. Тег
         имеет три характерных атрибута, которые далее будут описаны.
         • Type. Позволяет выбрать тип маркера. Как говорилось выше, могут использоваться не только привычные арабские цифры, но и другие символы. Если атрибуту type присвоить значение «A», то список будет упорядочиваться заглавными латинскими буквами. Значение «а» - строчные буквы; «I» – заглавные римские цифры; «i» – строчные римские цифры; «1» - арабские цифры.
         • Reversed. Предлагает браузеру производить обратный отсчет, например 3, 2, 1 и т. д. Следует заметить, что многими браузерами данный атрибут не поддерживается и не входит ни в одну спецификацию (кроме HTML 5).
         • Start. Значением может стать цифра, которая будет обозначать, с какого места начнется отсчет.

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

         По-другому данный вид называют ненумерованный список HTML. В качестве обозначения начала элемента используются декоративные маркеры. В прошлом абзаце использовался как раз такой список. При помощи CSS можно вообще убрать показ маркеров, происходит это с использованием свойства «list-style-type», со значением «none». Для обозначения начала ненумерованного списка используется тег

         . Внутри него содержатся элементы
         • . Для тега
           существует только один индивидуальный атрибут, а именно «type», который указывает тип маркера. Его значениями могут стать ключевые слова: disc, circle, square. Первое обозначает закрашенный круг, второе контур кружка и третье - квадрат. При помощи свойства «list-style-image» (из CSS) могут назначаться свои собственные маркеры, которые выглядят как небольшие картинки.

           Заключение

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

           ---

           Смотрите также

           • 
             Как в word отключить макросы
           • 
             Как создать электронную подпись в word
           • 
             Как в word сделать бланк
           • 
             Как сделать нумерация страниц в word 2010
           • 
             Html как сделать анимацию в
           • 
             Как вставить многостраничный pdf в word
           • 
             Как редактировать html шаблон
           • 
             Переменные в css
           • 
             Как отформатировать word документ
           • 
             Как сделать кнопку в html с ссылкой
           • 
             Php как вывести массив