Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 12 лет назад пользователемits.kpi.ua
1 ЛЕКЦИЯ 2-05 Ссылки и навигация
2 Введение Без ссылок Web-пространство потеряет смысл. Ссылки позволяют отслеживать информацию, переходя с одной Web-страницы на другую и от одной идеи к другой независимо от местонахождения сервера информационного сайта. 2
3 Удаление подчеркивания ссылок (1) Для того чтобы удалить стандартное подчеркивание ссылок используется свойство text- decoration с селектором псевдокласса для непосещаемых и посещаемых ссылок: a:link, a:visited { text-decoration: none; } Псевдокласс :link применяется к ссылкам, которые пользователь еще не посетил. Псевдокласс :visited соответствует ссылкам, уже посещенным пользователем. 3
4 Удаление подчеркивания ссылок (2) Свойство text-decoration может принимать пять значений: 4 ЗначениеРезультат underlineЛиния располагается под текстом overlineЛиния располагается над текстом blinkТекст мигает line-throughЛиния перечеркивает текст noneТекст никак не выделяется
5 Пример. Пример. Подчеркивание ссылок Домой Следующая 5 a:link, a:visited { text-decoration: none; } Домой Следующая
6 Изменение цвета ссылок в разных секциях страницы (1) При оформлении ссылки в основном тексте и в элементах навигации, сначала секции страницы помещаются в элементы div с разными значениями атрибутов: Домой Следующая Домой 6
7 Изменение цвета ссылок в разных секциях страницы (2) Затем используются селекторы потомка вместе с селекторами ID, для того чтобы отделить разные стили ссылок, предназначенные для разных частей Web- страницы: #nav a:link { color: blue;} #nav a:visited { color: purple;} #content a:link { color: black;} #content a:visited { color: yellow;} 7
8 Меняющиеся курсоры (1) Чтобы заменить стандартный курсор, отображаемый, когда указатель мыши наведен на ссылку, используется свойство cursor: a:link, a:visited { cursor: move; } 8
9 Меняющиеся курсоры (2) Свойство cursor может принимать следующие значения: 9 ЗначениеОписание autoКурсор меняется на изображение, определенное Web- обозревателем moveПоказывает, что элемент можно переместить; иногда визуализируется как перекрестье со стрелками на концах линий или в виде руки с поднятыми пятью пальцами textПоказывает, что можно выделить текст; иногда изображается как вертикальная линия, обычно применяемая в программах обработки текста waitПоказывает, что компьютер занят; иногда отображается в виде песочных часов helpПоказывает, что доступна информация или справка, часто по адресу, на который указывает ссылка; иногда отображается как знак вопроса или стрелка со знаком вопроса
10 Создание навигационных текстовых меню (1) Для того, чтобы создать меню, прежде всего надо разметить список ссылок в маркированном списке так, чтобы они были включены в элемент-контейнер div с атрибутом id: Домой Следующая Далее используется свойство border для создания основной структуры дизайна: 10
11 Создание навигационных текстовых меню (2) #nav { border-top: 1px solid black; border-right: 1px solid red; border-left: 1px solid red; padding: 0; margin-bottom: 1em; color:black; width: 8 em; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav ul li { margin: 0; border-bottom: 1px solid black; } 11
12 Вставка подменю в вертикальное меню (1) Основное навигационное меню дополняется в нужном пункте списка вложенным маркированным списком: Домой Главная Следующая 12
13 Вставка подменю в вертикальное меню (2) После задается некоторое поле слева от вложенного маркированного списка с помощью селектора потомка: #nav ul ul { background-color: grey; margin-left: 10 px; } 13
14 Создание горизонтальных навигационных меню (1) Данное меню создается по принципу вертикального меню, но при задании правил CSS, надо обязательно указать свойство float для пунктов меню: 14
15 Создание горизонтальных навигационных меню (2) #nav { border: 1px solid black; padding: 0; margin-bottom: 1em; color:black; width: 50%; background-color: grey; } #nav ul { list-style: none; margin: 1; padding: 0; float: left; } #nav ul li { margin: 3; float: left; border-right: 1px solid black; } 15
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.