Kako ustvariti interaktivno časovnico HTML

Avtor: Mike Robinson
Datum Ustvarjanja: 15 September 2021
Datum Posodobitve: 14 November 2024
Anonim
CS50 2014 - Week 9, continued
Video.: CS50 2014 - Week 9, continued

Vsebina

Časovnica je koristen način za prikaz seznama dogodkov na spletni strani, interaktivna časovnica pa uporabnikom omogoča nadzor nad prikazom vsebine. Čeprav obstaja veliko načinov za ustvarjanje interaktivne časovnice, mnogi potrebujejo več kot HTML. Vendar obstaja zelo preprosta rešitev HTML: na časovni premici lahko ustvarite interaktivne drsnike z atributom HTML "style". S tem se bodo uporabniki lahko prosto premikali po vsebini.

Korak 1

Ustvarite svojo datoteko HTML. Odprite nov dokument v urejevalniku besedil in ustvarite osnovno stran HTML. V kodo HTML dodajte to kodo:

Ločilo ("div") je vsebnik za seznam dogodkov na vaši časovni osi. Vrednost "auto" v "overflow" doda interaktivne drsne trakove, če je časovna premica daljša ali širša od vsebnika. Shranite stran kot "timeline.html".


2. korak

Ustvari vsebino. V presledek med oznakama "div" dodajte dogodke na časovni premici v naraščajočem ali padajočem vrstnem redu. Vsak dogodek dodajte v svoj dobro oblikovan odsek HTML. Med delom neprestano shranjujte stran.

3. korak

Preizkusite svojo kodo HTML. V spletnem brskalniku računalnika odprite datoteko "timeline.html". Če je vsebina večja od vsebnika "div", boste videli interaktivno drsno vrstico. Vrednosti "širine" in "višine" vsebnika prilagodite tako, da ustrezajo njegovemu navpičnemu ali vodoravnemu premiku.