Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Как в 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

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

webformyself.com

Как Сделать Список в 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 четвертая

pribylwm.ru

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

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

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

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

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

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

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

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

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

      Тег

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

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

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

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

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

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

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

      • Тег

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

          stimylrosta.com.ua

          Как создать список 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». Для обозначения начала ненумерованного списка используется тег



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!