Html marquee align center

Тег MARQUEE

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

Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров (Firefox 1.0, Netscape 6, Opera 6 и старше) также понимают и поддерживают этот тег.

Синтаксис

Параметры

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

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

Пример 1. Использование тега

Описание параметров тега

Параметр BEHAVIOR

Описание

Устанавливает способ движения содержимого внутри элемента .

Синтаксис

Аргументы

alternate Контент перемещается между правым и левым краем элемента. scroll Контент перемещается в направлении, заданным параметром direction , затем скрывается за пределами области, после чего начинает движение с начала. slide Контент перемещается в направлении, заданным параметром direction , доходит до края области и останавливается.

Значение по умолчанию

Пример 2. Способ перемещения

Результат данного примера показан ниже.

Параметр BGCOLOR

Описание

Устанавливает цвет фона под содержимым элемента MARQUEE .

Синтаксис

Аргументы

Значение цвета можно задавать двумя способами.

1. По его названию

Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Читайте также:  De train csgo css v34

Значение по умолчанию

Совпадает с цветом фона веб-страницы, обычно это белый цвет.

Параметр DIRECTION

Описание

Содержимое контейнера может перемещаться в четырех направлениях, не только влево и вправо, но также вверх и вниз.

Синтаксис

Аргументы

down Движение сверху вниз. left Движение справа налево. right Движение в правую сторону. up Движение вверх.

Значение по умолчанию

Пример 4. Направление движения

Параметр HEIGHT и WIDTH

Описание

Элемент MARQUEE отображается как прямоугольник, ширина и высота которого устанавливаются, соответственно, с помощью параметров width и height . Прокрутка содержимого будет происходить в пределах заданных размеров. Допускается использовать значения в пикселах или процентах. Если установлена процентная запись, то размеры вычисляются относительно родительского элемента, обычно это тег BODY . Иными словами, width=»100%» означает, что элемент будет занимать всю доступную ширину веб-страницы.

Синтаксис

Аргументы

Любое целое положительное число в пикселах или процентах.

Значение по умолчанию

Ширина — 100%, высота — 12 пикселов.

Пример 5. Ширина и высота области прокрутки

Параметр HSPACE и VSPACE

Описание

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

Синтаксис

Аргументы

Любое целое положительное число в пикселах.

Значение по умолчанию

Пример 6. Поля вокруг области прокрутки

Параметр LOOP

Описание

Устанавливает, сколько раз скролировать содержимое тега . После того, как заданное число раз отсчитано, содержимое остается в конечной точке.

Синтаксис

Аргументы

Любое целое положительное число или -1 для бесконечного воспроизведения движения.

Значение по умолчанию

Пример 7. Повторение скролирования

Параметр SCROLLAMOUNT

Описание

Анимация содержимого элемента происходит за счет периодического стирания информации и отображения ее на новом месте. Параметр scrollamount устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит.

Синтаксис

Аргументы

Любое целое положительное число пикселов.

Значение по умолчанию

Пример 8. Использование параметра scrollamount

Параметр SCROLLDELAY

Описание

На скорость скролирования, как и изменение позиции, влияет частота обновления содержания. Параметр scrolldelay задает время задержки между движениями в миллисекундах, чем ниже значение, тем выше скорость движения, и наоборот.

Читайте также:  Получить unicode символа java

Синтаксис

Аргументы

Любое целое положительное число миллисекунд.

Значение по умолчанию

Пример 9. Использование параметра scrolldelay

Параметр TRUESPEED

Описание

Если содержимое тега перемещается слишком быстро, то срабатывает встроенный ограничитель скорости, который насильно замедляет скролирование. Это сделано для того, чтобы сохранить читабельность текста. Если вы намерены обойти это ограничение, добавьте параметр truespeed , он заставляет прокручиваться содержимое с заданной скоростью. Для параметра scrolldelay ограничение скорости начинается со значения 60 миллисекунд и ниже.

Синтаксис

Аргументы

Значение по умолчанию

По умолчанию этот параметр выключен.

Пример 10. Использование параметра truespeed

Полезная информация

Источник

Бегущая строка в html | Тег

Бегущая строка в html | Тег < marquee data-lazy-src=

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

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

 direction="right">Бегущая строка cлева направо 

Что бы текст не исчезал за границы и двигался туда-сюда, нужно добавить атрибут behavior со значением alternate :

 behavior="alternate">Бегущая строка перемещается между краями 

Цветная бегущая строка перемещающаяся между правым и левым краем:

 behavior="alternate" bgcolor="#e20b0b" direction="right" style background-color:rgba(0, 0, 0, 0)" >line-height: 150%; text-shadow: #000000 0px 1px 1px;">Туда-сюда на цветном фоне 

Бегущая строка останавливается при наведении:

 onmouseout="this.start()" onmouseover="this.stop()"> Бегущая строка останавливается при наведении  

Если добавить стили css и украсить нашу бегущую строку, то получится цветная бегущая строка, как на примере:

 style background-color:rgba(0, 0, 0, 0)" >line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка 

Цветная бегущая строка движется слева направо:

 direction="right" style background-color:rgba(0, 0, 0, 0)" >line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка слева направо 

Настройки стиля:

Читайте также:  Посмотреть разметку страницы html

color: #ad0dd9 – цвет текста бегущей строки
font-size: 20px – размер шрифта
font-weight: bolder – вес шрифта
text-shadow: #000000 0px 1px 1px; – цвет и размер тени шрифта
bgcolor=“#e20b0b” – цвет фона строки
line-height: 150% – высота строки

Сделаем бегущую строку на цветном фоне:

 bgcolor="#ffd700">Бегущая строка на цветном фоне 

Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up :

 direction="up" style background-color:rgba(0, 0, 0, 0)" >line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка снизу вверх 

И сразу же добавим еще один атрибут heigh и настроим высоту блока:

 height="150" direction="up" style="color:#0F9D58; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка 

А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down :

 height="150" direction="down" style="color:#1C3850; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка сверху вниз 

Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay :

 scrolldelay="60" style background-color:rgba(0, 0, 0, 0)" >line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка 

scrolldelay=”60″ – изменяем цифры и устанавливаем свою скорость прокрутки

Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height .

height – это высота блока
width – ширина блока
scrollamount – атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.

 direction="down" height="150" width="300" scrollamount="3" style="border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка в рамочке 

Сделаем бегущую строку в рамочке на цветном фоне, добавим атрибут bgcolor :

 bgcolor="#e20b0b" direction="down" height="150" width="300" scrollamount="2" style="border: 2px solid #000000; text-align: center; color: #fbfbfc; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка в рамочке на цветном фоне 

Бегущая строка в html с картинками

Картинка движется справа налево:

  

Картинка в бегущей строке слева направо:

 direction="right"> 

Картинка сверху вниз (если изменить на direction=”up”, то будет снизу вверх):

 height="150" direction="down"> 

Снизу вверх и изменяем скорость:

 scrollamount="10" direction="up"> 

Изображение и текст в бегущей строке:

 behavior="scroll" direction="left" >Очень рада вас видеть на своем сайте! 

Как вставить ссылку в бегущую строку

Цветовые обозначения

  • 111 – тег бегущей строки
  • 111 – атрибут отвечающий за направление
  • 111 – еще один атрибут отвечающий за направление
  • 111 – эти части кода отвечают за фон
  • 111 – стиль текста
  • 111 – скорость прокрутки