whycomputer.com >> Datornätverk >  >> Internet

Hur man skapar en interaktiv HTML-tidslinje

En tidslinje är ett praktiskt sätt att visa en lista över händelser på en webbsida. Med en interaktiv tidslinje kan användarna själva styra hur de vill bläddra igenom innehållet. Även om det finns många sätt att bygga en interaktiv tidslinje, kräver de flesta mer än bara HTML. Det finns dock en mycket enkel lösning: skapa en scrollbar med HTML‑elementets "style"‑attribut. På så sätt kan användarna bläddra i tidslinjen efter eget tycke.

Steg 1

Skapa en HTML‑fil. Öppna ett nytt dokument i ett textredigeringsprogram och skapa en grundläggande HTML-sida. Lägg in följande kod i "body"‑sektionen: <div style="width:100%;height:400px;overflow:auto;"> </div> Diven (div) fungerar som en behållare för tidslinjens händelser. Attributet "overflow:auto" lägger till en interaktiv scrollbar när innehållet överskrider behållarens dimensioner. Spara filen som timeline.html.

Steg 2

Skapa tidslinjens innehåll. I utrymmet mellan öppnings‑ och stängningstaggarna för div lägger du till händelserna i stigande eller fallande ordning. Placera varje händelse i sin egen välformade HTML‑sektion och spara filen regelbundet. Testa sedan koden genom att öppna timeline.html i en webbläsare. Om innehållet blir större än behållaren kommer du att se en scrollbar. Justera bredd och höjd för att passa din layout.

Tips

  • Vertikala layouter är enklast att koda. Inkludera varje händelse i sin egen div. För horisontella layouter kan du använda en tabell med en rad och en kolumn per händelse. Se till att tabellens höjd matchar behållarens höjd och var noga med marginaler och padding.
  • I artikeln skapas en scrollbar med en "inline" CSS‑regel. Inline‑CSS skrivs direkt i elementets "style"‑attribut. Du kan istället använda en "internal" CSS‑sektion i <head> eller en separat .css‑fil för mer kontroll.
  • Öka interaktiviteten genom JavaScript. Lägg till knappar och skriv JavaScript som flyttar tidslinjens innehåll när användaren klickar på dem.

Verktyg du behöver

  • Textredigeringsprogram

URL:https://sv.whycomputer.com/internet/1014003388.html

Internet
  • Hur man skapar CD-etiketter på en Mac

    Att skapa CD‑etiketter är inte längre en uppgift exklusiv för musikföretag eller grafiska designers. Med fler som sparar backup‑data, anpassade spellistor och viktiga arbetsdokument på CD är det nu nödvändigt att ha tydliga etiketter för att hålla koll på alla skivor. Med en standard Avery‑CD‑etiket

  • Skapa din egen matematiksajt – steg-för-steg guide

    Att bygga en webbplats för matematik är ett utmärkt sätt att ge extra hjälp, skapa en mötesplats för studenter att dela anteckningar och studera, samt låta vem som helst lära sig nya eller förnya befintliga matematikkunskaper. En matematiksajt kan vara så enkel eller komplex du vill – det viktiga är

  • Skapa din egen politiska webbplats

    Vill du bli en opinionledare eller bara uttrycka din frustration över stämman i rådet? Med en egen webbplats kan du nå allmänheten, informera om politiska frågor och starta debatter. Du behöver ingen akademisk examen eller syndikatabbrev – bara en idé och en vilja att dela den. Steg 1: Definiera din

Datornätverk © https://sv.whycomputer.com