Блог о программировании, электронике и рыбалке

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

Главная » 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> – будет отображаться в этой “фиче”.

logo
Просмотров: 541
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

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

Яндекс.Метрика