Как да създадете интерактивен HTML график

Автор: Mike Robinson
Дата На Създаване: 7 Септември 2021
Дата На Актуализиране: 18 Ноември 2024
Anonim
IT-курсы НА МАКСИМАЛКАХ! / Как устроена HTML Academy / Интервью с основателями
Видео: IT-курсы НА МАКСИМАЛКАХ! / Как устроена HTML Academy / Интервью с основателями

Съдържание

Времевата линия е полезен начин за показване на списък със събития на уеб страница, а интерактивната времева линия дава на потребителите контрол над изгледа на съдържанието. Въпреки че има много начини за създаване на интерактивна времева линия, много от тях се нуждаят от повече от HTML. Има обаче много просто HTML решение: можете да създадете интерактивни ленти за превъртане на вашата времева линия, използвайки атрибута HTML "style". Правейки това, потребителите ще могат да се движат свободно по съдържанието.

Етап 1

Създайте своя HTML файл. Отворете нов документ в текстов редактор и създайте основна HTML страница. Добавете този код в раздела "тяло" на HTML:

Разделителят ("div") е контейнер за списъка със събития във вашата времева линия. Стойността „auto“ в „overflow“ добавя интерактивни ленти за превъртане, когато времевата линия е по-дълга или по-широка от контейнера. Запазете страницата като "timeline.html".


Стъпка 2

Създайте съдържанието. В интервала между таговете "div" добавете събитията във времевата скала във възходящ или низходящ ред. Добавете всяко събитие в неговата добре оформена HTML секция. Непрекъснато запазвайте страницата, докато работите.

Стъпка 3

Тествайте вашия HTML код. Отворете файла „timeline.html“ в уеб браузъра на вашия компютър. Ако съдържанието е по-голямо от контейнера "div", ще видите интерактивна лента за превъртане. Регулирайте стойностите "ширина" и "височина" на контейнера, така че да отговарят на неговия вертикален или хоризонтален ход.