whycomputer.com >> Interneto žinios >  >> Internetas

Kaip sukurti interaktyvią HTML laiko juostą

Įvadas

Laiko juosta – patogus būdas rodyti įvykių sąrašą tinklalapyje. Interaktyvi laiko juosta leidžia vartotojams patogiai slinkti per turinį. Šiame vadove parodyta, kaip sukurti paprastą interaktyvią laiko juostą tik naudojant HTML style atributą, be papildomų JavaScript ar sudėtingų CSS sprendimų.

Žingsnis 1 – Sukurkite HTML failą

Atidarykite teksto redaktorių ir įrašykite bazinę HTML struktūrą. <body> viduje įterpkite šį kodą:

<div style="overflow:auto; width:600px; height:300px;">
    
</div>

„overflow:auto“ prideda slankiklį, kai turinys viršija konteinerio matmenis. Išsaugokite failą kaip timeline.html.

Žingsnis 2 – Pridėkite įvykius

Tarp <div> ir </div> įrašykite įvykių blokų HTML kodą. Kiekvienas įvykis gali būti atskiras <section> arba <div> elementas. Išsaugokite failą po kiekvieno pakeitimo.

Žingsnis 3 – Patikrinkite rezultatą

Atverkite timeline.html naršyklėje. Jei turinys viršija konteinerį, pamatysite slankiklį. Prireikus koreguokite width ir height reikšmes, kad gautumėte norimą vertikalų arba horizontalų išdėstymą.

Patarnimai

  • Vertikalus išdėstymas yra paprasčiausias – kiekvieną įvykį supakuokite į atskirą <div>. Horizontaliai galite naudoti lentelę su viena eilute, bet atkreipkite dėmesį į lentelės aukštį ir margin bei padding reikšmes.
  • Čia naudojamas „inline“ CSS – stilius tiesiai style atributo viduje. Galite perkelti stilių į <head> kaip vidinį (<style>) arba į išorinį .css failą, kad turėtumėte didesnę kontrolę.
  • Norėdami praplėsti funkcionalumą, pridėkite JavaScript, pavyzdžiui, mygtukus, kurie perkelia turinį į kairę arba į dešinę.

Reikalingi įrankiai

  • Teksto redaktorius (pvz., Notepad++, VS Code ir kt.)

URL:https://lt.whycomputer.com/internetas/100403388.html

Internetas
  • Kaip sukurti CD etiketes Mac kompiuteryje

    Kaip sukurti CD etiketes Mac kompiuteryjeEtikečių kūrimas nebereikalingas tik muzikos įmonėms ar grafinio dizaino specialistams. Daug žmonių saugo atsargines duomenų kopijas, muzikos grojaraščius ir svarbius darbo dokumentus CD, todėl patogios CD etiketės tampa būtinos. Naudodami standartines Avery

  • Kaip sukurti matematikos svetainę nuo pradžios

    Matematikos svetainė – puikus būdas teikti papildomą pagalbą, dalintis pastabomis ir mokytis naujų ar atnaujinti žinias. Tokią svetainę galite sukurti tiek paprastą, tiek sudėtingą, priklausomai nuo poreikių. Svarbiausia – aiškios instrukcijos ir pavyzdžiai, kuriuos lankytojai dažniausiai ieško. 1 ž

Interneto žinios © https://lt.whycomputer.com