วิธีสร้างไทม์ไลน์ HTML เชิงโต้ตอบ

เส้นเวลาเป็นวิธีที่มีประโยชน์ในการแสดงรายการเหตุการณ์บนหน้าเว็บ และเส้นเวลาแบบโต้ตอบช่วยให้ผู้ใช้สามารถควบคุมการดูเนื้อหาบางส่วนได้ แม้ว่าจะมีหลายวิธีในการสร้างเส้นเวลาแบบโต้ตอบ แต่ส่วนใหญ่ต้องการมากกว่าแค่ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML) อย่างไรก็ตาม มีโซลูชัน HTML ที่ง่ายมากวิธีหนึ่ง คุณสามารถสร้างแถบเลื่อนแบบโต้ตอบสำหรับไทม์ไลน์ของคุณได้อย่างง่ายดายโดยใช้แอตทริบิวต์ "style" ของ HTML การทำเช่นนี้ ผู้ใช้ไทม์ไลน์ของคุณจะสามารถเลื่อนดูเนื้อหาได้ตามต้องการ

ขั้นตอนที่ 1

สร้างไฟล์ HTML ของคุณ เปิดเอกสารใหม่ในโปรแกรมซอฟต์แวร์แก้ไขข้อความ และสร้างหน้า HTML พื้นฐาน เพิ่มรหัสนี้ภายในส่วน "เนื้อหา" ของ HTML:

องค์ประกอบการแบ่ง ("div") เป็นคอนเทนเนอร์สำหรับรายการเหตุการณ์ในไทม์ไลน์ของคุณ ค่า "ล้น" ของ "อัตโนมัติ" เพิ่มแถบเลื่อนแบบโต้ตอบเมื่อเส้นเวลาของคุณกว้างหรือสูงกว่าคอนเทนเนอร์นี้ บันทึกหน้าเป็น "timeline.html"

ขั้นตอนที่ 2

สร้างเนื้อหาไทม์ไลน์ของคุณเอง ในช่องว่างระหว่างแท็กเปิดและปิด "div" ให้เพิ่มเหตุการณ์ในไทม์ไลน์ของคุณในลำดับจากน้อยไปมากหรือมากไปหาน้อย เพิ่มแต่ละเหตุการณ์ภายในส่วนของตัวเองของ HTML ที่มีรูปแบบอย่างดี บันทึกหน้าต่อไปในขณะที่คุณทำงาน

ทดสอบโค้ด HTML ของคุณ เปิดเว็บเบราว์เซอร์ของคอมพิวเตอร์แล้วโหลด "timeline.html" หากเนื้อหามีขนาดใหญ่กว่าคอนเทนเนอร์ "div" คุณจะเห็นแถบเลื่อนแบบโต้ตอบ ปรับค่า "ความกว้าง" และ "ความสูง" ของคอนเทนเนอร์ให้เหมาะกับรูปแบบแนวตั้งหรือแนวนอนของคุณ