Оформление на изображението и връзки

изображението

Поздрави, скъпи читателю.

Поставяне на цели

  1. Илюстрацията на връзката (която може да се кликне) се намира вляво от текста на връзката. Когато преместите показалеца на мишката върху илюстрация, текстът на връзката се маркира.
  2. Илюстрацията се намира над текста на връзката. Когато задържите курсора на мишката върху илюстрацията, текстът на връзката се маркира отново.

Решение на задача №1

Както можете да видите, HTML кодът е прост до безобразие и е валиден за стандарта HTML 4.01 Strict (повече за избора на HTML стандарт в DOCTYPE).

CSS обяснение:

3-ти ред образува ляв отстъп, който освобождава място за илюстрираща картина.

8-ми ред включва режима на абсолютно позициониране за изображението, намиращо се вътре в тага за връзка в блока с класа на блока на връзката (последователна нотация в ред 6 на .link-block a img показва, че стилът е приложен точно към желаното изображение). По този начин изваждаме картината от нормалния поток и нейната позиция вече може да бъде зададена с свойствата ляво и горно.

Свойствата9-ти и 10-ти ред отляво и отгоре изместват изображението с определена стойност

пиксела отляво и отгоре на горния ляв ъгъл на браузърапо подразбиране. Ако обаче външният блок има свойство position: relative, тогава нашето изображение ще бъде позиционирано спрямо горния ляв ъгъл на родителския блок. Именно за тези цели се използва инструкцията вред 15. Сега свойствата left и top задават отместването на изображението спрямо горния ляв ъгъл на блока

Естествено, свойството left: 0 може да бъде пропуснато, посочил съм го за по-голяма яснота.

Както можете да видите от ред 10, стойностите на левите и горните свойства могат да бъдат отрицателни.

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

Ако трябва да преместите връзката на изображението, винаги можете да използвате свойството margin, което формира полето. Свойството margin трябва да бъде поставено под ред 15, като по този начин дава полета на родителския блок.

Решение на задача No2

HTML кодът е останал същият.

Както можете да видите, стойностите на свойствата ляво и горно са променени в редове 9 и 10. Зададох ги точно така, че изображението да е поставено в средата над текста на връзката. На ред 16 добавих външна горна подложка, за да направя място за изображението над текста на връзката.