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

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

Решил сделать заметнее страничку своей программы Набор инструментов, а то после переезда со старого домена 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> – будет отображаться в этой “фиче”.

Похожие записи

Мы в социальных сетях

вконтакте twitter google plus facebook
  • keyboard_arrow_downЗакрепленная надпись
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/primery-na-html-i-css/zakreplennaya-nadpis.html
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 21.12.2016
    • Комментариев: 0
    • Просмотров: 544
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars 3 votes, average: 5,00 out of 5
    Загрузка...
  • Поделитесь с друзьями
logo

Комментариев: 0

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

arrow_upward