В своей работе приходится также заниматься html-версткой. Поэтому иногда буду в блоге размещать примеры на Css.
Итак, первый пример. Как оформить ссылку с картинкой на Css для продвинутых.
Первое время использовал это вариант:
<a href="#" title="Ссылка" ><img src="картинка.png" alt="Картинка" width="100" height="100"/></a>
Но, как оказалось, для поисковой оптимизации (СЕО) этот способ не совсем удачный - в ссылке должен быть текст.
Поэтому сейчас использую следующий вариант, который, как мне кажется, более красивый и читабельный:
<a href="#" title="Ссылка" class="link">Ссылка</a>
код для css файла
Итак, первый пример. Как оформить ссылку с картинкой на Css для продвинутых.
Первое время использовал это вариант:
<a href="#" title="Ссылка" ><img src="картинка.png" alt="Картинка" width="100" height="100"/></a>
Но, как оказалось, для поисковой оптимизации (СЕО) этот способ не совсем удачный - в ссылке должен быть текст.
Поэтому сейчас использую следующий вариант, который, как мне кажется, более красивый и читабельный:
<a href="#" title="Ссылка" class="link">Ссылка</a>
код для css файла
a.link{
display: block;
overflow: hidden;
background: url('картинка.png ') no-repeat;
width: 100px;
height: 100px;
text-indent: -9000px;
}
Удачи вам!
ОтветитьУдалить