Главная » HTML и CSS » Закрепленная надпись

Закрепленная надпись

Решил сделать заметнее страничку своей программы Набор инструментов, а то после переезда со старого домена srchost.net на этот, многие пользователи потеряли возможность обновляться. В причины вдаваться не буду – произошло обычное недопонимание. Из-за этого потерял много пользователей программы – печально.

А теперь по делу. Решил сделать фиксированную ссылку на страничку программы – результат можете созерцать в правой части блога. Смотрится прикольно. Использовать можно по разному – например картинку повесить или баннер.

Собственно сам пример:

<!– instruments –>
<style type="text/css">
.label{ position:fixed;top:400px;right:0;width:230px;font-size:20px;}
</style>
<div class="label">
<a href="https://geekelectronics.org/proekty/nabor-instrumentov">Набор инструментов</a>
</div>
<!– end instruments –>

 

Остановимся подробнее на параметрах CSS:

.label{ position:fixed;top:400px;right:0;width:230px;font-size:20px;}

position:fixed; – постоянная позиция на экране

top:400px; – отступ сверху

right:0; – слева или справа (слева будет left:0;)

width:230px; – ширина надписи – подбираем по длине текста или размеру картинки

font-size:20px; – размер шрифта.

Все, что разместите между <div class="label">  и </div> – будет отображаться в этой “фиче”.

Похожие записи
Оформление цитат (blockquote) в WordPress при помо... Часто возникает необходимость выделить в блоге определенную часть текста. Для этих целей часто используются цитаты –
. В данном пост...
“Пиксельная верстка” без заморочек... Взял небольшой заказ на верстку сайта с последующим созданием на ее основе темы для WordPress. Макет был простой, но он был создан в Adobe Illustrato...
This entry was posted in HTML и CSS and tagged , , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *