Како направити интерактивни ХТМЛ временски слијед

Аутор: Mike Robinson
Датум Стварања: 16 Септембар 2021
Ажурирати Датум: 8 Може 2024
Anonim
Responsive Design with Bootstrap by Neel Mehta
Видео: Responsive Design with Bootstrap by Neel Mehta

Садржај

Временска линија је користан начин приказивања листе догађаја на веб страници, а интерактивна временска линија корисницима даје контролу над приказом садржаја. Иако постоји много начина за стварање интерактивне временске линије, многима је потребно више од ХТМЛ-а. Међутим, постоји врло једноставно ХТМЛ решење: можете да креирате интерактивне траке за померање на временској траци помоћу ХТМЛ атрибута „стил“. Радећи ово, корисници ће моћи слободно да се крећу по садржају.

Корак 1

Направите своју ХТМЛ датотеку. Отворите нови документ у уређивачу текста и направите основну ХТМЛ страницу. Додајте овај код у одељак „тело“ ХТМЛ-а:

Преграда („див“) је контејнер за листу догађаја на вашој временској линији. Вредност „ауто“ у „оверфлов“ додаје интерактивне траке за померање када је временска линија дужа или шира од контејнера. Сачувајте страницу као „тимелине.хтмл“.


Корак 2

Направите садржај. У размак између ознака „див“ додајте догађаје на временској линији у растућем или опадајућем редоследу. Додајте сваки догађај у свој добро обликован ХТМЛ одељак. Стално чувајте страницу док радите.

3. корак

Тестирајте свој ХТМЛ код. Отворите датотеку „тимелине.хтмл“ у веб прегледачу рачунара. Ако је садржај већи од контејнера „див“, видећете интерактивну траку за померање. Подесите вредности "ширине" и "висине" контејнера тако да одговарају његовом вертикалном или хоризонталном ходу.