Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
184
Добавлен:
10.05.2015
Размер:
637.95 Кб
Скачать

Унаследованные браузеры

Если требуется создать такой дизайн для более старых браузеров, которые не поддерживают строковый блок (inline-block), то нужно будет сместить пункты списка влево во всех браузерах и использовать исправление очисткой, как описано в статье "Очистка плавающего контейнера без разметки исходного кода" (http://www.positioniseverything.net/easyclearing.html). Благодаря последнему раунду выпусков браузеры сделали inline-block ценным свойством вывода, поэтому если у вас нет большой доли более старых браузеров, таких как Firefox 2, вы сможете использовать метод inline-block.

Заключение по спискам

Мы рассмотрели сейчас базовое множество вариантов оформления и методов для списков. Вы можете реализовать эти примеры и объединять их для создания большого числа решений. Так как списки очень часто объединяют со ссылками, давайте перейдем к ссылкам.

Оформление ссылок

Оформление ссылок может быть в некоторой степени формой искусства. Существует множество различных требований и может быть трудно все их согласовать, создавая при этом эстетически интересный результат.

Тем не менее, это вполне возможно, пока вы помните о нескольких простых правилах:

  • понимать различные состояния ссылок

  • не отклоняться слишком далеко от ожиданий пользователя

  • использовать цвета с осторожностью

Если следовать этим правилам, вы будете создавать ссылки, которые понятны и легко используемы.

Понимание состояния ссылок

Прежде чем можно будет оформлять ссылки, необходимо понять различные состояния ссылок. Всего существует пять состояний: непосещенная/по умолчанию, посещенная, фокус, под указателем, и активная.

  • Непосещенная (unvisited) - состояние ссылки по умолчанию, когда она не была ранее активирована или посещена.

  • Посещенная (visited) - cостояние ссылки, которую пользователь уже посетил.

  • Фокус (focus) - применяется, когда ссылка имеет фокус - например, курсор клавиатуры пользователя находится на ссылке. Примечание: Браузер IE не поддерживает в настоящее время состояние фокуса, и использует просто состояние active вместо focus.

  • Под указателем (hover) -применяется, когда пользователь "удерживает" над ссылкой указатель, такой как указатель мыши, но еще не щелкнул на ссылке.

  • Активная (active) - применяется, когда пользователь активирует ссылку - буквально в то время, когда делает на ней щелчок. В некоторых браузерах этот стиль применяется также, когда ссылка открыта в другом окне или вкладке.

Нужно всегда определять код CSS для каждого из этих состояний. Каждое из них передает пользователю информацию о том, как он взаимодействует со ссылкой. Если имеются какие-то сомнения относительно focus, hover и active, можно просто оформить focus и hover одинаковым образом, так как их функции достаточно похожи, так что одинаковый стиль ссылки не должен вызывать путаницы. Затем можно будет добавить какую-нибудь простую вариацию для active, например, изменяя текст на курсив. В крайнем случае, можно оформить все три одинаково.

Обратите внимание, что эти состояния не являются взаимно исключающими (хотя в действительности ссылка не может одновременно быть посещенной и непосещенной) - однако вполне возможно для ссылки быть одновременно hover, active и visited.