Menu

Строительство маркированных, нумерованных и картиночных списков (урок №4)

Списки в HTML

Перед просмотром данной статьи рекомендуется изучить начальный урок – https://zavlekyxa.ru/sozdanie-pervoj-html-stranitsy/. В начальном уроке рассказывается про бесплатную программу, которая позволит человеку создавать веб-страницы на своем компьютере.

Существует два вида списков – это нумерованные и маркированные cписки

1. Нумерованный список – это числовое перечисление:

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

 

2. Маркированный список – это круговое перечисление:

Маркированный список

 

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

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

Если человек выбрал нумерованный список, то вся конструкция подпадает под теги <ol> </ol> 

Если человек предпочел маркированный список, то вся конструкция подпадает под влияние тегов <ul> </ul>

Конкретный нумерованный или маркированный элемент оборачивается в тег <li>  Пример: <li> Колбаса </li>

 

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

 

Числа списки в HTML

 

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

 

Список маркер

 

Замена маркированных и нумерованных списков на картинки

Маркеры и цифры в списках заменяются на картинки размером (16х16). Замена происходит благодаря коду list-style-image, который внедряется в CSS.

Пример:

Результат:

Картинки списки CSS

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



Подпишитесь!

Укажите свой электронный адрес


Создание “жирного” текста в HTML (урок... Самый распространенный способ привлечение внимания к тексту - это увеличение толщины и яркости букв. Владельцы сайто...
Производство подчеркиваний на веб-странице (урок №... Читая различные статьи на сайтах начинаешь обращать внимание на подчеркивания, выделения и цветовые колебания в тексте. ...
Курсивные буквы в HTML и CSS (урок №7)... Курсивный текст - это буквы, созданные в наклонном стиле. Пример: Прекрасно! Это Прекрасно! Курсивные буквы созда...
Создание первой HTML страницы на своем компьютере ... Создать веб-страницу реально на компьютере. Созданная страница не будет видна в интернете, она будет отображаться только...
Позиционирование текста в HTML и CSS (Урок №8)... Позиционирование текста осуществляется с атрибутом align. Именно этот атрибут определяет в какой стороне будет находится...
Создание абзацев в HTML (урок №3)... Абзацы важная составляющая в статье. Каждый крупный информационный ресурс использует абзацы в тексте. Создание аб...
Внедрение фона на веб-страницу (Урок №9)... Любая веб-страница наделена фоном, который является либо картинкой, либо каким-то цветом. Фон создается в CSS. Фоном...
Заголовки в HTML и CSS (урок N2) Веб-страницу трудно представить без заголовков. На миллионах сайтов расположены заголовки, они встречаются перед статьёй...
Быстрее всего учишься в трех случаях — до 7 лет, на тренингах, и когда жизнь загнала тебя в угол (Стивен Кови)