Cara membuat garis masa HTML interaktif

Pengarang: Robert White
Tarikh Penciptaan: 2 Ogos 2021
Tarikh Kemas Kini: 15 November 2024
Anonim
Cara Membuat Parallax Effect Scrolling Website Landing - Menggunakan HTML CSS JAVASCRIPT
Video.: Cara Membuat Parallax Effect Scrolling Website Landing - Menggunakan HTML CSS JAVASCRIPT

Kandungan

Garis masa adalah cara yang berguna untuk menunjukkan senarai peristiwa di laman web, dan garis masa interaktif memberi pengguna kawalan terhadap paparan kandungan. Walaupun terdapat banyak cara untuk membuat garis masa interaktif, banyak yang memerlukan lebih daripada HTML. Walau bagaimanapun, terdapat penyelesaian HTML yang sangat mudah: anda boleh membuat bar tatal interaktif pada garis masa anda menggunakan atribut "gaya" HTML. Dengan melakukan ini, pengguna akan dapat bergerak di sekitar kandungan dengan bebas.

Langkah 1

Buat fail HTML anda. Buka dokumen baru dalam penyunting teks dan buat halaman HTML asas. Tambahkan kod ini di bahagian "badan" HTML:

Pembahagi ("div") adalah wadah untuk senarai peristiwa dalam garis masa anda. Nilai "automatik" dalam "limpahan" menambah bar tatal interaktif apabila garis masa lebih panjang atau lebih lebar daripada bekas. Simpan halaman sebagai "timeline.html".


Langkah 2

Buat isi. Di ruang antara tag "div", tambahkan peristiwa dalam garis masa mengikut urutan menaik atau menurun. Tambahkan setiap acara di bahagian HTML yang tersusun dengan baik. Simpan halaman secara berterusan semasa anda bekerja.

Langkah 3

Uji kod HTML anda. Buka fail "timeline.html" di penyemak imbas web komputer anda. Sekiranya kandungannya lebih besar daripada bekas "div", anda akan melihat bar tatal interaktif. Laraskan nilai "lebar" dan "tinggi" bekas agar sesuai dengan garis tegak atau mendatarnya.