Come creare una timeline HTML interattiva

Autore: Robert Doyle
Data Della Creazione: 17 Luglio 2021
Data Di Aggiornamento: 10 Maggio 2024
Anonim
How to create responsive timeline with HTML & CSS | How to Create an Interactive HTML Timeline
Video: How to create responsive timeline with HTML & CSS | How to Create an Interactive HTML Timeline

Contenuto

Una sequenza temporale è un modo utile per visualizzare un elenco di eventi su una pagina Web e una sequenza temporale interattiva offre agli utenti il ​​controllo sulla visualizzazione del contenuto. Sebbene ci siano molti modi per creare una sequenza temporale interattiva, molti richiedono più dell'HTML. Tuttavia, esiste una soluzione HTML molto semplice: puoi creare barre di scorrimento interattive sulla tua timeline utilizzando l'attributo HTML "style". In questo modo, gli utenti potranno spostarsi liberamente nel contenuto.

Passo 1

Crea il tuo file HTML. Apri un nuovo documento in un editor di testo e crea una pagina HTML di base. Aggiungi questo codice nella sezione "body" dell'HTML:

Il divisore ("div") è un contenitore per l'elenco di eventi nella sequenza temporale. Il valore "auto" in "overflow" aggiunge barre di scorrimento interattive quando la sequenza temporale è più lunga o più ampia del contenitore. Salva la pagina come "timeline.html".


Passo 2

Crea il contenuto. Nello spazio tra i tag "div", aggiungi gli eventi nella sequenza temporale in ordine crescente o decrescente. Aggiungi ogni evento nella sua sezione HTML ben strutturata. Salva continuamente la pagina mentre lavori.

Passaggio 3

Verifica il tuo codice HTML. Apri il file "timeline.html" nel browser web del tuo computer. Se il contenuto è più grande del contenitore "div", vedrai una barra di scorrimento interattiva. Regola i valori "larghezza" e "altezza" del contenitore per adattarlo alla sua corsa verticale o orizzontale.