Cara Membuat Garis Masa Interaktif dengan HTML

Garis masa adalah cara berguna untuk memaparkan senarai peristiwa di laman web, dan garis masa interaktif memberi pengguna kawalan lebih terhadap penayangan kandungan. Walaupun terdapat banyak cara untuk membuat garis masa interaktif, kebanyakan memerlukan lebih daripada hanya HTML. Namun, ada satu penyelesaian HTML yang sangat mudah: menggunakan atribut "style" untuk menambah bar skrol interaktif.

Langkah 1: Sediakan fail HTML

Buka editor teks dan cipta fail HTML asas. Tambahkan kod berikut di dalam bahagian <body>:

<div style="overflow:auto; width:100%; height:400px;">
    
</div>

Element <div> berfungsi sebagai bekas senarai peristiwa. Nilai overflow:auto menambah bar skrol apabila kandungan melebihi saiz bekas. Simpan fail sebagai timeline.html.

Langkah 2: Tambah kandungan garis masa

Di antara tag <div> buka dan tutup, letakkan setiap peristiwa dalam bahagian tersendiri, seperti:

<div>
    <h4>1990</h4>
    <p>Peristiwa pertama.</p>
</div>
<div>
    <h4>2000</h4>
    <p>Peristiwa kedua.</p>
</div>

Simpan semasa anda bekerja.

Uji kod HTML anda

Buka fail timeline.html dalam pelayar. Jika kandungan lebih besar daripada bekas <div>, bar skrol interaktif akan muncul. Sesuaikan nilai width dan height bagi menyesuaikan susun atur tegak atau mendatar.

Tips

Susun atur tegak lebih mudah di kod. Bungkus setiap bahagian peristiwa dalam <div> tersendiri. Untuk susun atur mendatar, anda boleh menggunakan jadual satu baris dengan satu sel bagi setiap peristiwa. Pastikan tinggi jadual sama dengan tinggi bekas <div> dan perhatikan nilai margin serta padding.
Artikel ini menggunakan CSS "inline". Anda juga boleh menggunakan CSS "internal" (di bahagian <head>) atau "external" (fail .css). Kedua-dua kaedah memberi kawalan lebih terhadap pemformatan.
Anda boleh memperluas interaksi dengan JavaScript. Tambah butang HTML dan tulis skrip JavaScript untuk menggerakkan kandungan garis masa bila pengguna mengklik butang.

Alat yang Diperlukan

Perisian editor teks (contoh: Notepad++, VS Code, Sublime Text)

URL:https://ms.whycomputer.com/internet/1015003388.html

Cara Menukar Tajuk Blog Menggunakan Kod HTML

Cara Menemui Cap Masa pada Sejarah Imbas Internet Anda

Internet

Panduan Menyediakan Label CD di Mac

Menyiapkan Label CD di Mac Menetapkan label CD kini bukan lagi kerja eksklusif syarikat muzik atau pereka grafik. Dengan semakin ramai orang menyimpan fail sandaran, senarai muzik tersuai, dan dokumen penting di dalam CD, membezakan setiap cakera menjadi keperluan penting. Berikut ialah panduan lang

Cara Membuat Laman Web Matematik Profesional

PengenalanLaman web matematik bukan sahaja tempat rujukan, ia juga platform interaktif untuk berkongsi pengetahuan, memudahkan belajar dan latihan. Dengan beberapa perancangan dan alat yang betul, anda boleh menghasilkan laman web yang mudah diakses, menarik, dan lengkap.Langkah 1: Pilih Pelayan dan

Cara Membuat Laman Web Politik

Cara Membuat Laman Web Politik Adakah anda ingin menjadi pendapat? Atau adakah anda berpendapat bahawa keputusan majlis bandaraya anda amat buruk? Anda mungkin mahu membuat laman web untuk memaklumkan orang ramai atau sekadar mengungkapkan ketidakpuasan anda terhadap sistem politik. Internet memberi

Internet