Создание фиксированной кнопки для сайта
 | |
| Как сделать на сайте фиксированную кнопку, так чтоб она была с одной стороны и прокручивая страницу оставалась на месте, здесь рассмотрим. На интернет ресурсам можно часто увидеть различные кнопки, это могут быть разные функций, здесь покажем пример на этом функционале и задействуем иконку twitter, что каждый веб мастер может поставить свою. Все очень просто, нужно поставить код в низ сайта, если вы решили, чтоб на всех страницах она была. Или на той странице, где хотели бы ее видеть, то тогда прописываем перед закрывающим тэгом /body, что будет визуально только видно на той или иной странице, что вы выбрали. Сам код будет состоять из div, где идентификатором послужит follow. В нем и будет установлена картинка, что нужно по умолчанию самому выставлять на ней ширину и длину. Но и alt и title поставим в код и безусловно ссылку, куда будет по клику происходить переход. И останется только прописать CSS, который и будет отвечать за фиксацию. По умолчанию она стоять будет вверху с левой стороны, это напротив шапки, если вы страницу опускаете, то пройдет вид материала и дойдет до них сайта, что понимаете, постоянно на виду и исчезать не будет. И здесь нужно грамотно выставить функцию, это может быть как социальная сеть, что как раз ставить будем или обратная связь. Возможно кто то рекламу поставит, здесь возможностей много, так как главная задача, чтоб пользователи и гости видели ее, но есть и минусы, что нужно сделать ее так "Кнопка" чтоб она не надоедала. Приступаем к установке: Если решили, что на всем портале должна, то в низ сайта ставим HTML код. Код <div id='follow'> <a href='Здесь ссылка куда переходит' target='_blank'> <img src='http://zornet.ru/zorner_ru_1/ABVUSA/1489642981_twitter.png' border=0 alt='Пропишем альт' title='И титле также предусмотрены' /></a> </div> Осталось в таблицу стилей CSS разместь. Код #follow { margin: 0px; background: e6eeee; z-index: 2; position: fixed; top: 0px; left: 0px; } После все сохраняем и обновляем страницу, и увидите вашу кнопку, она может большая или маленькая, здесь вам решать, можно вообще под дизайн сайта красиво оформить. Также вам будет представлена демонстрация этого материала, чтоб понять как она работает. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
