Спецэффекты для сайта

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

Назначение этого элемента в основном для различных рекламных целей (реклама различных товаров, услуг и т. д.).
Бегущая строка html задаётся тегом <marquee></marquee>
Давайте придумаем какой нибудь текст и вставим его между тегами <marquee></marquee>.

Уроки по изучению основ html

Для тега бегущей строки <marquee> можно также задать:
- высоту строки – height;
- ширину строки – width;
- цвет фона бегущей строки – bgcolor;
- количество прокрутки строки — loop
Давайте пропишем все эти элементы для нашей строки:

<marquee height=»35″ width=»100%» bgcolor=»#99CCFF»
loop=»3″>
Уроки по изучению основ html</marquee>

Уроки по изучению основ html

Также с помощью специальных тегов вы можете управлять движением бегущей строки:

Scrollamount — скорость движения строки (может принимать значение от 1 до 10);
Direction — задает направление движения бегущей строки («left» — влево, “right” – вправо, “up” – вверх, “down” – вниз);
Behavior – режим прокрутки (“scroll” — обычная прокрутка, “slide” — прокрутка с остановкой, “аlternate” – движение от края к краю).

Зададим движение для нашей строки:

<marquee height=»35″ width=»100%» bgcolor=»#99CCFF» loop=»3″ direction=»right» behavor=»slide» scrollamount=»3″>Уроки по изучению основ html</marquee>

Уроки по изучению основ html

С помощью нехитрых манипуляций и стилей GSS можно из бегущей строки сделать мигающую строку. Посмотрите, как это будет выглядеть:


Уроки по
изучению
основ html

А вот и код html нашей мигающей строки:

<marquee style=»height:30; width:120; color: #ff0000;» scrollamount=»120″ scrolldelay=»500″>Уроки по<br> изучению<br>основ html</marquee>

На этом изучение основ html закончено. Вы получили тот минимум знаний, который вам позволит создать самостоятельно свой первый в жизни сайт. В других разделах нашего сайта вы познакомитесь с другими атрибутами, которые нужны для красивого оформления вашей веб-странички.

Поделиться в соц. сетях

Спецэффекты для сайта
Спецэффекты для сайта
Спецэффекты для сайта
Спецэффекты для сайта
Спецэффекты для сайта
Спецэффекты для сайта

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика