Cum să creați o cronologie HTML interactivă

Autor: Robert Doyle
Data Creației: 18 Iulie 2021
Data Actualizării: 10 Mai 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

Conţinut

O cronologie este un mod util de a afișa o listă de evenimente pe o pagină web, iar o cronologie interactivă oferă utilizatorilor control asupra vizualizării conținutului. Deși există multe modalități de a crea o cronologie interactivă, multe au nevoie de mai mult decât HTML. Cu toate acestea, există o soluție HTML foarte simplă: puteți crea bare de derulare interactive pe cronologia dvs. folosind atributul HTML „stil”. Procedând astfel, utilizatorii vor putea să se deplaseze liber în jurul conținutului.

Pasul 1

Creați fișierul HTML. Deschideți un document nou într-un editor de text și creați o pagină HTML de bază. Adăugați acest cod în secțiunea „corp” a codului HTML:

Divizorul („div”) este un container pentru lista evenimentelor din cronologia dvs. Valoarea „automată” din „depășire” adaugă bare de derulare interactive atunci când cronologia este mai lungă sau mai largă decât containerul. Salvați pagina ca „timeline.html”.


Pasul 2

Creați conținutul. În spațiul dintre etichetele „div”, adăugați evenimentele în cronologie în ordine crescătoare sau descendentă. Adăugați fiecare eveniment în propria secțiune HTML bine formată. Salvați pagina în mod continuu în timp ce lucrați.

Pasul 3

Testați codul HTML. Deschideți fișierul „timeline.html” în browserul web al computerului. Dacă conținutul este mai mare decât containerul „div”, veți vedea o bară de derulare interactivă. Reglați valorile „lățimii” și „înălțimii” containerului pentru a se potrivi cu cursa sa verticală sau orizontală.