Kaip sukurti interaktyvų HTML Timeline

Laiko eilutė yra naudingas būdas rodyti tinklalapio įvykių sąrašą, o interaktyvi laiko eilutė suteikia vartotojams galimybę peržiūrėti turinio peržiūrą. Nors yra daug būdų sukurti interaktyviąją laiko eilutę, daugeliui jų reikia daugiau nei tik hiperteksto žymėjimo kalba (HTML). Tačiau yra vienas labai paprastas HTML sprendimas. Naudodami HTML „stiliaus“ atributą, savo laiko eilutei galite lengvai sukurti interaktyvias slinkties juostas. Tai darydami, jūsų laiko eilutės naudotojai galės naršyti turinį taip, kaip jiems patinka.

1 žingsnis
Sukurkite savo HTML failą. Atidarykite naują dokumentą teksto redaktoriaus programoje ir sukurkite pagrindinį HTML puslapį. Įtraukite šį kodą į HTML „kūno“ skyrių: Padalijimo elementas („div“) yra jūsų laiko eilutės įvykių sąrašo konteineris. „Automatinio“ „perpildymo“ vertė prideda interaktyvią slinkties juostą, kai jūsų laiko eilutė tampa platesnė arba didesnė už šį konteinerį. Išsaugokite puslapį kaip „timeline.html“.

2 žingsnis
Sukurkite savo laiko eilutės turinį. Erdvėje tarp atidarymo ir uždarymo „div“ žymių pridėti savo laiko eilutės įvykius didėjimo arba mažėjimo tvarka. Pridėkite kiekvieną įvykį savo gerai suformuoto HTML sekcijoje. Išsaugokite puslapį, kai dirbate.
Patikrinkite savo HTML kodą. Atidarykite kompiuterio naršyklę ir įkelkite „timeline.html“. Jei jo turinys yra didesnis už „div“ konteinerį, pamatysite interaktyvią slinkties juostą. Sureguliuokite konteinerio „plotį“ ir „aukštį“, kad atitiktų vertikalią arba horizontalią išdėstymą.

Patarimai
Vertikalūs išdėstymai yra paprasčiausias kodas. Paprasčiausiai suvyniokite kiekvieną savo renginio sekciją į savo „div“ elementą. Horizontaliam išdėstymui galite naudoti lentelę su viena eilute ir stulpelio langeliu kiekvienam įvykiui. Jei tai padarysite, padarykite stalo aukštį tokį patį kaip jūsų „div“ konteinerio aukštis. Atkreipkite dėmesį į vertikalią lentelės vertę.
Šiame straipsnyje sukuriama interaktyvi slinkties juosta naudojant „inline“ kaskadinio stiliaus lapą (CSS). „Inline“ stiliaus lapai patenka į HTML elemento atidarymo žymos „stiliaus“ atributą. Tačiau galite naudoti „vidinį“ arba „išorinį“ stiliaus lapą. „Vidaus“ stiliaus lapai patenka į HTML „galvutės“ skyrių. „Išoriniai“ stiliaus lapai yra atskiri „.css“ failai. Naudojant bet kurį iš šių tipų, galite geriau kontroliuoti bet kurio HTML turinio formatavimą.
Galite išplėsti pavyzdžio interaktyvumą naudodami „JavaScript“. Galite pradėti pridėti HTML mygtukus ir tada parašyti „JavaScript“, kad perkeltumėte laiko eilutės turinį, kai vartotojai spustelės mygtukus.

Reikalingi elementai