Hvordan lage en interaktiv HTML-tidslinje

Forfatter: Robert White
Opprettelsesdato: 4 August 2021
Oppdater Dato: 15 November 2024
Anonim
How to create Modern Timeline just by using HTML CSS JQuery
Video: How to create Modern Timeline just by using HTML CSS JQuery

Innhold

En tidslinje er en nyttig måte å vise en liste over hendelser på en webside, og en interaktiv tidslinje gir brukerne kontroll over innholdsvisningen. Mens det er mange måter å lage en interaktiv tidslinje på, trenger mange mer enn HTML. Imidlertid er det en veldig enkel HTML-løsning: Du kan lage interaktive rullefelt på tidslinjen din ved hjelp av HTML "stil" -attributtet. Ved å gjøre dette vil brukerne kunne bevege seg fritt rundt innholdet.

Trinn 1

Lag HTML-filen. Åpne et nytt dokument i et tekstredigeringsprogram og opprett en grunnleggende HTML-side. Legg til denne koden i "body" -delen av HTML:

Deleren ("div") er en container for listen over hendelser i tidslinjen din. "Auto" -verdien i "overflow" legger til interaktive rullefelt når tidslinjen er lengre eller bredere enn containeren. Lagre siden som "tidslinje.html".


Steg 2

Lag innholdet. Legg inn hendelsene i tidslinjen i stigende eller synkende rekkefølge i mellomrommet mellom "div" -kodene. Legg til hver hendelse i sin egen velformede HTML-seksjon. Lagre siden kontinuerlig mens du jobber.

Trinn 3

Test HTML-koden din. Åpne filen "timeline.html" i datamaskinens nettleser. Hvis innholdet er større enn "div" -beholderen, vil du se en interaktiv rullefelt. Juster "bredde" og "høyde" verdiene til beholderen for å passe den vertikale eller horisontale strekningen.