
- •32. Оформление списков и ссылок
- •Введение
- •Оформление списков
- •Базовые маркеры и числа
- •Специальные маркеры, использующие изображения
- •Поля и заполнение списков
- •Неупорядоченные списки
- •Упорядоченные списки
- •Итак, что делать?
- •Использование list-style-position
- •Что насчет списков определений?
- •Вложенные списки
- •Горизонтальные списки
- •Ложные столбцы
- •Унаследованные браузеры
- •Заключение по спискам
- •Оформление ссылок
- •Понимание состояния ссылок
- •Как эволюция браузеров задает ожидания
- •Ожидания пользователей
- •Используйте цвет с осторожностью
- •Приступим к делу: css
- •Оформления состояния ссылок в правильном порядке
- •Управление поведением по умолчанию
- •Подчеркивание
- •Создание рамки
- •Пример: восстановление значений по умолчанию браузера Netscape
- •Ложное подчеркивание с помощью border-bottom
- •Оформление, которое не полагается на цвет
- •Иконки на ссылках
- •Объединяем все вместе - простое навигационное меню
- •Заключение
- •Контрольные вопросы
- •Дополнительное чтение
32. Оформление списков и ссылок
В данной лекции рассматриваются основные приемы оформления списков и ссылок. Показываются основные типы списков: упорядоченные и неупорядоченные, вертикальные и горизонтальные, а также вложенные списки. Рассматриваются состояния ссылок, ожидания пользователей относительно ссылок, оформление ссылок с помощью CSS
Введение
Многие элементы на Web-странице являются в некоторой степени "великодушными" с точки зрения дизайна - если они не "вполне правильные", то это не имеет большого значения. В случае списков и ссылок совершенно другая история - если записать их неправильно, то это может создавать серьезные проблемы для людей, пытающихся использовать Web-сайт.
Ссылки, в частности, имеют некоторые ключевые требования оформления и ожидания пользователей. Плохо оформленные ссылки могут испортить взаимодействие пользователей с Web-сайтом, так как им придется останавливаться и думать о том, где совершить щелчок. В худшем случае пользователь не сможет даже сказать, какие объекты на странице являются в действительности ссылками.
В этой статье мы рассмотрим базовые навыки, которые нужны для создания надежного оформления списков и ссылок. Мы обсудим также некоторые способы уклонения от основных ловушек этих элементов и создания результата, который будет работать в различных браузерах, и будет доступен пользователям с функциональными недостатками.
В этой статье используется несколько примеров, которые будут рассмотрены в ходе изложения.
Статья имеет следующее содержание:
Оформление списков
Базовые маркеры и числа
Специальные маркеры, использующие изображения
Поля и заполнение списков
Неупорядоченные списки
Упорядоченные списки
Итак, что делать?
Использование list-style-position
Что насчет списков определений?
Вложенные списки
Горизонтальные списки
Ложные столбцы
Унаследованные браузеры
Заключение по спискам
Оформление ссылок
Рассмотрение состояния ссылок
Как эволюция браузеров задает ожидания
Ожидания пользователей
Используйте цвет с осторожностью
Приступим к делу: CSS
Оформление состояния ссылок в правильном порядке
Управление поведением по умолчанию
Подчеркивание
Создание рамки
Пример: восстановление значений по умолчанию браузера Netscape
Ложные подчеркивания с помощью border-bottom
Оформление, которое не полагается на цвет
Иконки на ссылках
Объединяем все вместе - простое навигационное меню
Заключение
Контрольные вопросы
Дополнительное чтение
Оформление списков
Рассмотрим, прежде всего, основы оформления списков с помощью CSS, прежде чем переходить к рассмотрению более сложных методов.
Базовые маркеры и числа
Фундаментальным вопросом рассмотрения при создании оформления списка является форма маркера или способ нумерации, который желательно использовать. Можно также вообще не использовать маркеры и числа. Как было показано в статье 16 о списках HTML, существует множество различных возможностей, задаваемых с помощью свойства list-style-type.
Например, чтобы задать для всех неупорядоченных списков на сайте квадратные маркеры, используйте следующий код CSS:
ul li {
list-style-type: square;
}
который создает что-то подобное изображенному на рис. 32.1:
Рис. 32.1. Неупорядоченный список с квадратными маркерами
Несколько распространенных типов списков показаны на рис. 32.2:
Рис. 32.2. Распространенные стили списков
Существуют также и другие менее распространенные возможности.
Отметим, что маркеры и цифры будут изображаться цветом, который задается или наследуется элементом li. Если требуется, чтобы маркер имел цвет отличный от текста, нужно использовать изображение, или решить проблему с помощью других элементов в пунктах списка (это можно легко сделать, например, когда все пункты являются ссылками).