| Главная » Статьи » HTML » Списки |
Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом того, что восприятие текста с экрана монитора хуже, чем с его печатного варианта, это является весьма полезным приемом. Для установки маркированного списка используются теги <UL> и <LI> (пример 1). Пример 1. Создание маркированного списка  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Список</title> </head> <body> <p>Что следует учитывать при тестировании сайта:</p> <ul> <li>работоспособность всех ссылок</li> <li>поддержку разных браузеров</li> <li>читабельность текста</li> </ul> </body> </html> Ниже показан результат данного примера (рис. 1).
Рис. 1. Вид маркированного списка в браузере Opera Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="..." тега <UL>. Вместо многоточия подставляется одно из трех значений указанных в табл. 1.
В примере 3 показано создание маркированного списка, маркеры в котором принимают вид окружности. Пример 3. Изменение вида маркера <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Списки</title> </head> <body> <p>Коктейли на основе текилы</p> <ul type="circle"> <li>Старинный мексиканский</li> <li>Голубая луна</li> <li>Храбрый бык</li> <li>Съерра Маргарита</li> </ul> </body> </html> Результат примера показан ниже (рис. 2).
Рис. 2. Маркеры списка в виде окружности С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунки. С этой целью применяется стилевой атрибут list-style-image, значением которого выступает путь к изображению. Его надо добавить внутри ключевого слова url, как показано в примере 4. Пример 4. Использование стилей для добавления рисунков к маркерам <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Списки</title> <style type="text/css"> UL { list-style-image: url(images/square.gif); /* Путь к графическому файлу с маркером */ } </style> </head> <body> <ul> <li>Заголовок должен быть короче трех строк;</li> <li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;</li> <li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li> </ul> </body> </html> Результат данного примера показан на рис. 3.
Рис. 3. Маркеры списка в виде рисунков | |||||||||
| Просмотров: 1321 | Комментарии: 17 | | |||||||||
| Всего комментариев: 1 | ||
| ||
