Найти в Дзене
Wolfo78

Якорные ссылки, ссылки на другие страницы и увеличивающиеся картинки в html/css

Якорные ссылки (якори) Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Создание. Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута "id" тега <p> (рисунок 1) В качестве значения "href" для перехода к этому якорю используется имя закладки с символом решетки # впереди. (рисунок 2) Ссылки на другие страницы Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибута "href" тег <a> устанавливает ссылку. Создание. Делать их нужно при помощи тэга <a> и атрибута href ( используется адрес документа) <a href="(ссылка страницы сайта) " > «Текст» </a> Увеличивающиеся картинки при на ведении на них курсором. В html вставляем картинку, уменьшаем с помощью «width»(не обязательно

Якорные ссылки (якори)

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Создание.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута "id" тега <p> (рисунок 1)

Рисунок 1
Рисунок 1

В качестве значения "href" для перехода к этому якорю используется имя закладки с символом решетки # впереди. (рисунок 2)

Рисунок 2
Рисунок 2

Ссылки на другие страницы

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибута "href" тег <a> устанавливает ссылку.

Создание.

Делать их нужно при помощи тэга <a> и атрибута href ( используется адрес документа)

<a href="(ссылка страницы сайта) " > «Текст» </a>

Увеличивающиеся картинки при на ведении на них курсором.

В html вставляем картинку, уменьшаем с помощью «width»(не обязательно) и берем ее в <p id=”*название id*”> </p>

Дальше идем в css(подключенный к html) и копируем вот это:

#*название id*{

position: absolute;

top: 950px;

left: 950px;

-moz-transition: all 2s ease-out; /*Время увеличения картинки*/

-o-transition: all 2s ease-out; /*Время увеличения картинки*/

-webkit-transition: all 2s ease-out; /*Время увеличения картинки*/

border-radius: 10px;

}

#*название id*:hover{

-webkit-transform: scale(3.6); /* Размер увеличения картинки*/

-moz-transform: scale(3.6); /* Размер увеличения картинки*/

-o-transform: scale(3,6); /* Размер увеличения картинки*/

border-radius: 10px;

}

Примечание:

position: absolute;

top: 950px;

left: 950px; - абсолютное позиционирование, которое вы можете изменять.