Hur man skapar en interaktiv HTML-tidslinje

Författare: Vivian Patrick
Skapelsedatum: 7 Juni 2021
Uppdatera Datum: 1 Maj 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

Innehåll

En tidslinje är ett användbart sätt att visa en lista över händelser på en webbsida, och en interaktiv tidslinje ger användarna kontroll över innehållsvyn. Det finns många sätt att skapa en interaktiv tidslinje, men många behöver mer än HTML. Det finns dock en mycket enkel HTML-lösning: Du kan skapa interaktiva rullningslister på din tidslinje med HTML-attributet "stil". Genom att göra detta kommer användarna att kunna röra sig fritt i innehållet.

Steg 1

Skapa din HTML-fil. Öppna ett nytt dokument i en textredigerare och skapa en grundläggande HTML-sida. Lägg till den här koden i avsnittet "body" i HTML:

Avdelaren ("div") är en behållare för listan över händelser i din tidslinje. "Auto" -värdet i "overflow" lägger till interaktiva rullningsfält när tidslinjen är längre eller bredare än behållaren. Spara sidan som "tidslinje.html".


Steg 2

Skapa innehållet. Lägg till händelserna i tidslinjen i stigande eller fallande ordning i mellanslag mellan "div" -taggarna. Lägg till varje händelse i sitt eget välformade HTML-avsnitt. Spara sidan kontinuerligt medan du arbetar.

Steg 3

Testa din HTML-kod. Öppna filen "timeline.html" i datorns webbläsare. Om innehållet är större än "div" -behållaren ser du ett interaktivt rullningsfält. Justera behållarens "bredd" och "höjd" så att de passar dess vertikala eller horisontella slag.