Распределённые ссылки - «Верстка»
Среда 7 Май 2025
  • :
  • :
Новости мира Интернет » Самоучитель CSS » Вёрстка » Распределённые ссылки - «Верстка»

Распределённые ссылки - это когда у одной ссылки несколько активных областей, которые расположены в разных местах на странице. Это можно использовать для очень симпатичного эффекта и не требует ничего, кроме CSS.


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





Как это делается?



Ничего особенного, просто разместите элементы, которые вы хотите использовать в этом эффекте, в одной ссылке.
Например так:



<span class="name">Toby Yong</span>
Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
<div align="center">[thumb]http://www.css-tricks.ru/image_1.jpg[/thumb]</div>


Теперь осталось применить некоторые CSS-приёмы, чтобы сделать то, что мы хотим сделать. Конечно же необходимо установить позиции для текста, но гораздо более важная цель - картинки. Для них необходимо использовать абсолютное позиционирование.


Пишем следующий CSS:


.people		{ position: relative; 
a		{ text-decoration: none; color: #222; display: block;
margin: 0 0 0 270px; outline: none; padding: 5px; 
a thumb		{ border: 1px solid #ccc; display: block; position: absolute; 
a:hover		{ background: #ffefcd; 
a .name		{ font: 18px Georgia, Serif; 
a:hover .name	{ color: #900; font-weight: bold; 
a:hover thumb	{ border: 5px solid #222; margin: -4px; 
#toby thumb	{ top: 0; left: 0; 
#tom thumb	{ top: 0; left: 134px; 
#gail thumb	{ top: 134px; left: 0; 
#padma thumb	{ top: 134px; left: 134px; 

Пример

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Распределённые ссылки - это когда у одной ссылки несколько активных областей, которые расположены в разных местах на странице. Это можно использовать для очень симпатичного эффекта и не требует ничего, кроме CSS. Как всегда, пример - лучший способ показать что мы хотим, а главное объяснить, как это делается. Как это делается? Ничего особенного, просто разместите элементы, которые вы хотите использовать в этом эффекте, в одной ссылке. Например так: Теперь осталось применить некоторые CSS-приёмы, чтобы сделать то, что мы хотим сделать. Конечно же необходимо установить позиции для текста, но гораздо более важная цель - картинки. Для них необходимо использовать абсолютное позиционирование. Пишем следующий CSS: Пример

0

Смотрите также

А что там на главной? )))



Комментарии )))