Как сделать бегущую строку
Перейти к содержимому

Как сделать бегущую строку

  • автор:

Бегущая строка в HTML

Таким же образом в HTML может перемещаться изображение:

В XHTML, как и в HTML 5, бегущая строка запрещена, точнее запрещены теги да и с дизайнерской точки зрения бегущая строка — это вчерашний день. Но! Предположим, что вы все-таки решили разместить у себя на сайте или на отдельной его странице бегущую строчку, тогда используйте для такой страницы структуру документа HTML 4.01.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML код iframe  Бегущая строка в HTML HTML теги формы

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Бегущая строка в HTML? – Не вопрос!

Как сделать бегущую строку

Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.

Синтаксис

Атрибуты

behavior Задает тип движения содержимого контейнера . bgcolor Цвет фона. direction Указывает направление движения содержимого контейнера . height Высота области прокрутки. hspace Горизонтальные поля вокруг контента. loop Задает, сколько раз будет прокручиваться содержимое. scrollamount Скорость движения контента. scrolldelay Величина задержки в миллисекундах между движениями. truespeed Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay . vspace Вертикальные поля вокруг содержимого. width Ширина области прокрутки.

Закрывающий тег

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

HTML 4.01 IE Cr Op Sa Fx

    Тег MARQUEE   Lorem ipsum dolor sit amet.  

Как сделать бегущую строку? #50905

Перейдите к редактированию той страницы, на которой Вы планируете разместить бегущую строку (список страниц — нажать на страницу — выбрать «Редактирвать содержимое» — «Текст страницы»).

phpuw7Kgy

Шаг 4

В текстовом редакторе перейдите к HTML-редактору:

259917421_9831_65784f7de7353.png

Шаг 5

В открывшемся окне вставьте тег в начале предложения и тег в конце предложения, которое будет являться бегущей строкой.

phpRPLPPZ

Обратите внимание!

  • Вы можете изменить скорость бегущей строки, для этого используйте атрибут scrollamount ( устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода ). Таким образом получится примерно следующее:

Шаг 6

Нажмите «Ок» («Обновить») в HTML-редакторе.

phpgVJBSB

Шаг 7

И сохраните изменения в текстовом редакторе. Бегущая строка готова.

phpIgZrrg

Шаг 8

Перейдите на сайт . На нужной странице должна появиться бегущая строка.

phpSo1GpI

Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.

Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

Этот сайт был создан на платформе
CMS S3 от Megagroup.ru

Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.

HTML тег

Тег используется для создания бегущей строки на сайте. При помощи этого тега можно перемещать текст или изображения по горизонтали и вертикали.

Тег считается устаревшим, и W3D не рекомендует его использовать. В случае использования тега у вас могут возникнуть проблемы с валидностью кода.

Синтакс

Тег — парный тег, состоящий из двух частей: открывающий тег () и закрывающий ( ).

Пример

html> html> head> title>Заголовок документа title> head> body> marquee> Бегущая строка, созданная при помощи HTML тега Marquee marquee> body> html>

В нашем пример мы не использовали указывающий направление движения атрибут direction для тега , и текст перемещается справа налево по умолчанию.

Пример

html> html> head> title>Заголовок документа title> head> body> marquee direction="down"> Бегущая строка, созданная при помощи HTML тега Marquee. marquee> body> html>

Пример

html> html> head> title>Заголовок документа title> head> body> marquee behavior="scroll" direction="up"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" /> marquee> body> html>

Используйте CSS свойства width и background-color для стилизации элемента .

Пример

html> html> head> title>Заголовок документа title> head> body> style> marquee < width: 100%; padding: 10px 0; background-color: lightblue; > style> marquee direction="scroll">Прокручиваемый текст, созданный с помощью элемента HTML Marquee и стилизованный со свойствами CSS. marquee> body> html>

Атрибуты

Атрибуты Значение Описание
behavior slide
alternate
scroll
Тип движения
slide — останавливается, достигнув края
alternate — меняет направление, достигнув края
scroll — появляется с противоположной стороны
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Цвет фона
direction up
down
left
right
Направление движения
height pixels
%
Высота области прокрутки
hspace pixels Горизонтальные поля вокруг тега
loop number Количество прокруток контента. Если данный атрибут не указан, контент будет прокручиваться постоянно.
scrollamount number Скорость прокрутки. Размер задается в пикселях. Значение по умолчанию 6.
scrolldelay seconds Величина задержки в миллисекундах между движениями. Значение по умолчанию — 85. Значения ниже 60 игнорируются.
truespeed seconds Позволяет использовать значения атрибута scrolldelay равные меньше 60-и миллисекунд.
vspace pixels Отступ по вертикали.
width pixels
%
Ширина области прокрутки.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

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

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