#resources а, созданному в шаге 1.
3. Отредактируйте стиль #resources а так, чтобы он выглядел следующим образом:
#resources а {
border-bottom: поnе:
padding-right: 22рх;
278 Глава 9. Приводим в порядок навигацию сайта '
Если вы сохраните страницу и просмотрите ее в браузере, то увидите маленькие
Значки с земным шаром с правой стороны двух нижних ссылок боковой панели.
Теперь отформатируем другие ссылки.
4. Добавьте еще три стиля во внутренней таблице стилей:
a[href$=' .pdf'J {
background: urlCimages/acrobat.png) no-repeat right top:
}
a[href$=' .zip'J {
background: urlCimages/zip.png) no-repeat right top:
}
a[href$=' .doc'] {
background: url(images/word.png) no-repeat right top:
Эти три новых стиля проверяют, как заканчивается атрибут href, идентифицируют
Ссылки как файлы Adobe Acrobat (. pdf), ZIР-архивы (. zi р) или документы
W ord (. doc) и назначают различные значки в каждом конкретном случае.
Наконец, добавьте состояние hover (ifаведения указателя мыши) для ссылок на
ресурсы:
#resources a:hover {
color: #FFF:
background-color: #6E97BF:
Этот стиль изменяет цвет текста и добавляет цвет фона (рис. 9.14).
Окончательную версию этого урока вы найдете в файле 09 fi ni shed/ l i nks 1 l i nks .
Html.
RESOURCES
• AnnU81 Report J9
:=~~:·;~
• Р81'8Пt Corporate Slte а
• ~~oreunka а
Рмс. 9.14. Используя расширенные селекторы атрибутов, вы можете легко
