Поступил вопрос от одного из подписчиков: «Как создать фиксированную кнопку на сайте, похожую на эту?»
Чтобы эта кнопка, не зависимо от того места страницы, которое просматривает пользователь, всегда оставалась на одном и том же месте и прокручивалась вместе с окном браузера.
Чаще всего такие кнопки прикрепляют к одной из стенок (правой или левой) сайта.
Давайте сейчас рассмотрим тот код, который нужно добавить на свои веб-страницы, чтобы эта кнопка появилась и начала работать.
Вот тот код, который нужно разместить на свою веб-страницу:
<div id='follow'> <a href='//twitter.com' target='_blank'> <img src='https://s5.postimg.org/5glnpd73r/1489642981_twitter.png' border=0 alt='Следи за мной на Twitter' title='Следи за мной на Twitter' /></a> </div>
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Я разместил его перед закрывающим тэгом </body>. Если вы используете шаблон wordpress, то это можно сделать в файле footer.php вашей темы.
Что собой представляет этот код?
По сути, мы просто создали блок div с идентификатором follow. Содержанием этого блока является та самая картинка-ссылка, которую мы и хотим сделать фиксированной.
Все. По HTML части мы закончили.
Теперь остается только с помощью средств CSS, сделать этот блок фиксированным.
Вот тот код, который для этого необходим.
#follow { margin: 0px; background: e6eeee; z-index: 2; position: fixed; top: 0px; left: 0px; }
Его нужно добавить в файл стилей, который у вас используется. Например, style.css.
z-index: 2 – необходим для того, чтобы на небольших мониторах кнопка располагалась поверх основного текста.
Основной эффект достигается за счет применения свойства position: fixed, которое делает блок фиксированным и заданием точного местоположения блока (top: 0px; left: 0px;).
Вот и все. Как видите, используется минимальное количество кода.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти