Kā izveidot interaktīvu HTML laika skalu

Autors: William Ramirez
Radīšanas Datums: 23 Septembris 2021
Atjaunināšanas Datums: 14 Novembris 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

Saturs

Laika skala ir noderīgs veids, kā tīmekļa lapā parādīt notikumu sarakstu, un interaktīva laika skala ļauj lietotājiem kontrolēt satura skatu. Lai gan ir daudz veidu, kā izveidot interaktīvu laika skalu, daudziem ir nepieciešams vairāk nekā HTML. Tomēr ir ļoti vienkāršs HTML risinājums: savā laika skalā varat izveidot interaktīvas ritjoslas, izmantojot HTML atribūtu "style". To darot, lietotāji varēs brīvi pārvietoties pa saturu.

1. solis

Izveidojiet savu HTML failu. Teksta redaktorā atveriet jaunu dokumentu un izveidojiet pamata HTML lapu. Pievienojiet šo kodu HTML sadaļā body:

Sadalītājs ("div") ir konteiners notikumu sarakstam jūsu laika skalā. Vērtība “auto” sadaļā “pārpilde” pievieno interaktīvas ritjoslas, ja laika skala ir garāka vai platāka par konteineru. Saglabājiet lapu kā "timeline.html".


2. solis

Izveidojiet saturu. Vietā starp tagiem "div" pievienojiet notikumus laika skalā augošā vai dilstošā secībā. Pievienojiet katru notikumu savā labi izveidotajā HTML sadaļā. Strādājot, nepārtraukti saglabājiet lapu.

3. solis

Pārbaudiet savu HTML kodu. Datora tīmekļa pārlūkprogrammā atveriet failu “timeline.html”. Ja saturs ir lielāks par konteineru "div", redzēsiet interaktīvu ritjoslu. Pielāgojiet konteinera "platuma" un "augstuma" vērtības, lai tas atbilstu tā vertikālajam vai horizontālajam gājienam.