Внимание! В материалах сайта используются несколько ссылок на посторонние ресурсы. Но из-за сегодняшней ситуации в мире, некоторые сайты по этим ссылкам могут быть заблокированы. Чтобы исключить блокировку, рекомендуем установить программное обеспечение VPN.
Маркированные HTML-списки

 

Что такое маркированные списки?

Маркированный список - это HTML список, пункты которого отмечены каким-либо символом, обычно символом bullet (пуля).

 

 

Внимание! Весь код в примерах отредактирован на сервисе C D E P E N.

Чтобы получить визуальную информацию — нажмите в редакторе на вкладку Result.


Простой пример маркированного списка:

 

Самый простой и наглядный пример маркированного списка - это содержание книги или меню сайта с категориями и подкатегориями

 

В HTML для создания маркированного списка обычно используется специальный тег <ul>. И давайте сразу рассмотрим простой пример:

 

 

В HTML-тег <ul> мы поместили HTML-тег <li>. Каждый новый пункт маркированного списка - это новый тег <li>.

 


Пример маркированного списка с вложенностью:

 

Маркированные списки могут быть многоуровневыми. Посмотрите пример ниже:

 

 

Каждый новый уровень маркированного списка находится на уровне тега <li> и вместо тега <li> мы помещаем тег <ul>, тем самым, мы создаем вложенности. Вложенностей маркированного списка <ul> может быть сколько угодно.

 


Примеры маркированных списков для горизонтального и вертикального меню сайта:

 

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

 

 


Пример стилизации маркированного списка:

 

Для стилизации маркированного списка <ul><li>,- вы можете использовать CSS-селекторы, псевдоклассы и псевдоэлементы.

А стилизовать маркированный список вы можете с помощью CSS-свойства list-style-type, если по каким-то причинам вам не подходит стандартный значок слева bullet (пуля).

 

 


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

 

Что такое нумерованные списки?

 

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

 


Простой пример нумерованного списка:

 

Для того чтобы создать нумерованный список, вам необходимо в HTML-тег <ol> поместить HTML-теги <li>, как в примере ниже:

 

 


Пример нумерованного списка с бесконечным вложением:

 

И конечно ваш нумерованный список может иметь бесконечную вложенность. Посмотрите пример нумерованного списка с вложенностью ниже:

 

 


Пример смешанных нумерованных и маркированных списков:

 

И даже мы можем смешивать нумерованные и маркированные списки как в примере ниже:

 

 


Примеры атрибутов для нумерованных списков: reversed, start и type

 

Для нумерованного списка можно задавать различные атрибуты, такие как reversed, start и type.

 

Атрибут reversed для нумерованного списка позволяет сортировать цифры в обратном порядке.

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

А с помощью атрибута type вы можете задавать типы, которые будут заданы вместо арабских цифр. Например, вместо арабских цифр вы можете задавать буквы алфавита (a, b, c и т.д.) или римские цифры и буквы в разных регистрах.

 

Посмотрите на примеры атрибутов нумерованного HTML-списка ниже:

 

 


Примеры list-style-type для нумерованных списков

 

И вместо атрибутов вы конечно же можете использовать специальные CSS-свойства для стилизации нумерованных списков, такие как list-style-type или короткую запись list-style:

 


 

Заключение

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

А если вы интересуетесь веб-разработкой, версткой сайтов, программированием, подпишитесь на YouTube канал FructCode, где периодически публикуются материалы на эти темы.

 

Источник: Fructcode.com, Codepen.io

 

 

   
Поделиться:

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

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

 

Hosting CityHost

Внимание! Это самый лучший хостинг, который я выбрал! И за приемлемую цену...
Мой сайт - Joomlasite.net появился на хостинге с середины июня 2024 года. Так как это мой первый сайт, который выложил в интернет, то опыта работы на хостинге оказалось совсем мало. Были обнаружены некоторые ошибки, как в структуре сайта, так и особенно много появилось проблем с индексацией в поиске... Но сейчас это уже в прошлом...
Очень благодарен Службе поддержки в которую обращался много раз за помощью. Все проблемы разрешались очень грамотно и оперативно в разное время суток.
Несколько слов о загрузке сайта,- сайт загружается очень быстро, без сбоев, как на компьютере, так и на мобильном устройстве.
Никаких трудностей с работой на хостинге не испытываю, и за пользование которым - оплатил двухгодичный тариф. Перед этим был бесплатный тестовый период в течение 10-и дней, и после которого - без сомнений и колебаний решил остаться на этом ресурсе.
Хочется отметить очень классную Панель управления хостингом - простая, информативная и интуитивно понятная. Все возможности настроек, как сайта, так и хостинга выполнены грамотно и профессионально.
Сервера хостинга находятся в Украине, Финляндии и Германии,- мой сайт размещен на немецком сервере.
На этом свои впечатления об этом хостинге заканчиваю, и настоятельно рекомендую всем сайтостроителям - воспользоваться лучшим украинским хостингом CityHost.