Hoe u een interactieve HTML-tijdlijn maakt

Schrijver: Robert White
Datum Van Creatie: 26 Augustus 2021
Updatedatum: 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

Inhoud

Een tijdlijn is een handige manier om een ​​lijst met gebeurtenissen op een webpagina weer te geven, en een interactieve tijdlijn geeft gebruikers controle over de inhoudweergave. Hoewel er veel manieren zijn om een ​​interactieve tijdlijn te maken, hebben er veel meer nodig dan alleen HTML. Er is echter een heel eenvoudige HTML-oplossing: u kunt interactieve schuifbalken op uw tijdlijn maken met behulp van het HTML-kenmerk "stijl". Door dit te doen, kunnen gebruikers vrij door de inhoud bewegen.

Stap 1

Maak uw HTML-bestand. Open een nieuw document in een teksteditor en maak een eenvoudige HTML-pagina. Voeg deze code toe in het "body" -gedeelte van de HTML:

De divider ("div") is een container voor de lijst met gebeurtenissen in uw tijdlijn. De "auto" -waarde in "overflow" voegt interactieve schuifbalken toe wanneer de tijdlijn langer of breder is dan de container. Sla de pagina op als "timeline.html".


Stap 2

Creëer de inhoud. Voeg in de ruimte tussen de "div" -tags de gebeurtenissen in de tijdlijn toe in oplopende of aflopende volgorde. Voeg elk evenement toe in zijn eigen goed opgemaakte HTML-sectie. Sla de pagina voortdurend op terwijl u werkt.

Stap 3

Test uw HTML-code. Open het bestand "timeline.html" in de webbrowser van uw computer. Als de inhoud groter is dan de "div" -container, ziet u een interactieve schuifbalk. Pas de waarden voor "breedte" en "hoogte" van de container aan zodat deze bij de verticale of horizontale lijn passen.