Категория > Ссылки > Сделать, чтобы слой целиком был ссылкой - «Ссылки»

Сделать, чтобы слой целиком был ссылкой - «Ссылки»

27-03-2016, 09:41. Автор: Administrator

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	1.0+	1.0+

Задача

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block, чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height: 100%, ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>Слой-ссылка</title>
   <style>
    .link {
     width: 300px; /* Ширина слоя */
     height: 200px; /* Высота слоя */
     background: #fc0; /* Цвет фона */
    }
    .link a {
     display: block; /* Ссылка как блочный элемент */
     text-align: center; /* Выравнивание по центру */
     height: 100%; /* Высота на весь слой */
     color: #666; /* Цвет ссылки */
    }
  </style>
 </head> 
 <body> 
  <div class="link">
   <a href="1.html">Ссылка</a>
  </div>
 </body>
</html>

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Рис. 1. Ссылка в слое

Перейти обратно к новости