Как сделать переход на другую страницу в css
Добавил пользователь Валентин П. Обновлено: 05.10.2024
В этом уроке вы научитесь создавать ссылки - переходы с одной страницы на другую.
Что необходимо для создания ссылки?
Пример 1:
будет выглядеть в браузере:
Элемент a обозначает "якорь/anchor". Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.
Как насчёт ссылок между моими собственными страницами?
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Пример 2:
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
Пример 3:
В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:
Пример 4:
Сочетание "../" указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше "../../" или более.
Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).
А ссылки внутри страницы?
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
Как при нажатии по HTML -блоку перейти на другую страницу? Не используя тег .
4 ответа 4
Ну из div ссылку вы сделать не сможете, но можно привязать onclick к нужному блоку и делать переход как по ссылке следующим образом:
Пример:
Если у вас не срабатывает корректно onClick в некоторых браузерах, то добавьте javascript: :
Делать ссылки на JS - это уже неправильный семантический подход. Ссылки должны индексироваться и быть доступны скринридерами. Да и зачем усложнять жизнь с джаваскриптом, когда есть возможность реализации на нативном HTML.
Но так как ссылка - строчный элемент, внутри него неправильно всовывать блочные элементы. Поэтому лучше сделать ссылку элементом блока, и потом натянуть ее поверх остального содержимого блока:
Вы хотите создать сайт, да не обычный, а такой, который действительно будет привлекать взор посетителя, ведь, как вы знаете, самое главное это детали. Мало кто придает внимание эффектам переходов между страниц сайта, в данном уроке мы рассмотрим подборку эффектов переходов для вашего сайта реализованные с помощью css. В демонстрации вы можете найти множество интересных вариантов, среди которых, вы, наверняка, найдете желаемый для себя пример, и реализуете в своем проекте.
Обратите ваше внимание, что это всего лишь примеры эффектов, их цель вдохновить вас на будущие креативные разработки. Мы использовали некоторые классы, чтобы заставить страницу преобразиться данными переходами, а вовсе не для навигации или иных целей.
Следует также заметить, что данные эффекты будут работать только в браузерах поддерживающие трансформации CSS, И так, давайте приступим.
Шаг 1. HTML
Нам необходимо организовать разметку, которая нам понадобиться для отображения демонстрации:
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Ссылки это то, что делает Всемирную паутину такой, какой мы её знаем. Они позволяют путешествовать с одного сайта на другой, т.е. сёрфить. Ссылки, как ягодка за ягодкой при сборе земляники, манят нас, влекут за собой. и не дают уснуть вовремя 🙂
Ссылки бывают разные, но чаще всего встречаются такие:
Ссылка создаётся с помощью тега (от англ. Anchor, якорь). Чтобы указать адрес, куда перенаправляется пользователь, используется атрибут href . Сам адрес пишется в кавычках. Между тегами указывается текст ссылки. Желательно, чтобы он объяснял пользователю куда он перейдет, а не просто гласил типа "Жми сюда".
При клике на любое из слов, помещенных внутри элемента пользователь переходит по указанной ссылке.
По умолчанию, когда вы наводите на ссылку, указатель мыши превращается в руку с тычущим пальчиком, а цвет ссылки меняется.
Абсолютные и относительные ссылки
Давайте представим, что к вашему соседу пришел курьер и спрашивает, где найти вашу квартиру. Сосед может начать издалека: "планета Земля, материк Евразия, страна Украина, город Киев, улица Мечникова, дом 16, квартира 41". А может просто сказать "да вот его квартира, слева от меня". В первом случае сосед дал курьеру (браузеру) абсолютную ссылку, а во втором - относительную.
Относительные ссылки используются для перехода в рамках одного сайта (со страницы на страницу или с одного места в другое). Особенно это удобно, если вы только создаёте свой сайт и еще не опубликовали его. Если вы создавали свою первую веб-страницу вместе с нами, самое время создать вторую и посмотреть как работают относительные ссылки 🙂
Ссылка на документ в той же папке
Итак, давайте создадим в той же папке HTML_Start (это наша корневая папка) еще один html документ с любым названием, например about.html
Читайте также: