Различия
Показаны различия между двумя версиями страницы.
— | markirovannye_neuporjadochennye_i_numerovannye_spiski [2025/07/06 12:39] (текущий) – создано - внешнее изменение 127.0.0.1 | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | ====== Маркированный список ul ====== | ||
+ | |||
+ | {{htmlmetatags> | ||
+ | metatag-description=(Маркированный, | ||
+ | }} | ||
+ | |||
+ | Маркированный список используется для группировки и выделения элементов, | ||
+ | |||
+ | Неупорядоченный список создается элементами двух типов: | ||
+ | * <ul> - Unordered List, неупорядоченный список. Данный элемент создает, | ||
+ | * <li> - List Item, элемент списка. | ||
+ | Тип маркера списка по умолчанию - •. Но это положение вещей можно легко изменить. Для указания типа маркера всего списка или его отдельного элемента, | ||
+ | * " | ||
+ | * " | ||
+ | * " | ||
+ | <note important> | ||
+ | |||
+ | ====== Нумерованный список ====== | ||
+ | Данный тип списка используется для форматирования перечня действий или элементов, | ||
+ | |||
+ | Нумерованный список создается точно так же, как и маркированный, | ||
+ | ====== Стили для форматирования списков ====== | ||
+ | Помимо стилевых правил для форматирования шрифта и цвета символов, | ||
+ | * **Свойство list-style-type** | ||
+ | Это свойство является заменой устаревшего атрибута type, о котором упоминалось в предыдущих разделах. Свойство list-style-type может принимать следующие значения: | ||
+ | |||
+ | * disc - маркировка в виде дика (замена type=" | ||
+ | * circle - маркировка в виде окружности (замена type=" | ||
+ | * square - маркировка в виде квадрата (замена type=" | ||
+ | * decimal - арабская (десятичная) нумерация (замена type=" | ||
+ | * upper-roman - римская нумерация в верхнем регистре (замена type=" | ||
+ | * lower-roman - римская нумерация в нижнем регистре (замена type=" | ||
+ | * upper-alpha - алфавитная нумерация в верхнем регистре (замена type=" | ||
+ | * lower-alpha - алфавитная нумерация в нижнем регистре (замена type=" | ||
+ | * none - маркер или нумерация отсутствует | ||
+ | Свойство стиля list-style-type можно применять одинаково как для форматирования маркированного, | ||
+ | |||
+ | Помимо дублирования значений отмененного атрибута type, с помощью стилей можно вообще запретить всяческую нумерацию или маркировку. Для этого используется значение none свойства list-style-type. | ||
+ | |||
+ | Ниже показан пример применения стиля для оформления нумерации списка в виде малых букв латинского алфавита: | ||
+ | |||
+ | Листинг: | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </ | ||
+ | |||
+ | * **Свойство list-style-image** | ||
+ | Еще одним эффектным способом визуального оформления списков является возможность использования графического маркера элемента списка. То есть, вместо использования нескольких скучных стандартных маркеров, | ||
+ | |||
+ | Изображение должно быть создано в формате *.jpg, *.gif или *.png. При использовании *.gif или *.png явным преимуществом является поддержка прозрачности - маркер становится более универсальным и может быть применен на web-страницах, | ||
+ | |||
+ | Предположим, | ||
+ | |||
+ | Листинг: | ||
+ | < | ||
+ | <ul style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | Если в стиле для списка одновременно указать и стандартный тип маркера и графический маркер, | ||
+ | <note important> | ||
+ | Для отмены графического маркера используйте свойство list-style-image со значением none: | ||
+ | |||
+ | < | ||
+ | ... | ||
+ | <li style=" | ||
+ | ... | ||
+ | </ | ||
+ | * **Свойство list-style-position** | ||
+ | Свойство стиля list-style-position позволяет управлять положением маркера или номера элемента по отношению к тексту элемента списка. Возможные значения: | ||
+ | |||
+ | * outside - маркеры расположенны снаружи по отношению к тексту (по умолчанию) | ||
+ | * inside - маркеры расположенны "в тексте" | ||
+ | ====== Многоуровневые списки ====== | ||
+ | <note important> | ||
+ | Многоуровневые списки используют в тех случаях, | ||
+ | < | ||
+ | Все о разметке | ||
+ | Предназначение разметки | ||
+ | Важность синтаксически корректных и правильных документов | ||
+ | Об элементах, | ||
+ | Дополнительная информация | ||
+ | Обзор структуры элементов | ||
+ | Общие атрибуты | ||
+ | Дополнительная информация | ||
+ | ... | ||
+ | </ | ||
+ | Для создания многоуровневого списка просто вложите в любой из элементов списка еще один список. Это и будет список второго уровня. Для создания третьего уровня, | ||
+ | |||
+ | Листинг: | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | <ul> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </li> | ||
+ | < | ||
+ | < | ||
+ | <ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </ | ||
+ | При выполнении примера вы, несомненно, | ||
+ | |||
+ | Одним из вариантов ее решения является использование стиля для вложенных списков: | ||
+ | |||
+ | Листинг: | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </li> | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </li> | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </li> | ||
+ | < | ||
+ | <ol style=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | </li> | ||
+ | </ol> | ||
+ | </ | ||
+ | |||
+ | Для еще большего визуального отличия элементов первого и второго уровня, | ||
📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.
📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Nginx простые примеры конфигурации
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах
7 Самых Популярных Обзоров
- Хостинг для Python-скриптов и приложений
- ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
- Подборка купонов (промокоды) на хостинг, антидетект браузеры
- Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
- Хостинг в России
- Хостинг в Европе
- Обзор браузера Dolphin {anty} для мультиаккаунтинга