Маркированные списки позволяют разбить большой контент на отдельные блоки. Тем самым привлекается внимание читателя к контенту и повышается его читабельность. С учетом того, что восприятие контента с экрана монитора хуже, чем с его печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используются теги <UL> и <LI> (пример 1).
Пример 1. Создание маркированного списка
Ниже показан результат данного примера (рис. 1).
Рис. 1. Вид маркированного списка в браузере Опера
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="..." тега <UL>. Вместо многоточия подставляется одно из трех значений указанных в табл. 1.
Код ШТМЛ | Пример |
---|---|
<ul type="disc"> | Что следует учитывать при тестировании с нашего сайта:
|
<ul type="circle"> | Что следует учитывать при тестировании с нашего сайта:
|
<ul type="square"> | Что следует учитывать при тестировании с нашего сайта:
|
В примере 3 показано создание маркированного списка, маркеры в котором принимают вид окружности.
Пример 3. Изменение вида маркера
Результат примера показан ниже (рис. 2).
Рис. 2. Маркеры списка в виде окружности
С помощью CSS (ЦСС) этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунки. С этой целью применяется стилевой атрибут list-style-image, значением которого выступает путь к изображению. Его надо добавляем внутри ключевого слова url, как показано в примере 4.
Пример 4. Использование стилей для добавления рисунков к маркерам
Результат данного примера показан на рис. 3.
Рис. 3. Маркеры списка в виде рисунков
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект