วิธีการสร้างแถบเลื่อน

สารบัญ:

วิธีการสร้างแถบเลื่อน
วิธีการสร้างแถบเลื่อน

วีดีโอ: วิธีการสร้างแถบเลื่อน

วีดีโอ: วิธีการสร้างแถบเลื่อน
วีดีโอ: การสร้างแถบเลื่อน หรือ Scroll Bar ใน Excel ทำได้อย่างไร? 2024, เมษายน
Anonim

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

แถบเลื่อนเป็นองค์ประกอบสำคัญของไซต์
แถบเลื่อนเป็นองค์ประกอบสำคัญของไซต์

มันจำเป็น

อินเทอร์เน็ตหรือกวดวิชา html ใด ๆ

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

เลือกตำแหน่งสำหรับแถบเลื่อนบนหน้าของเว็บไซต์ที่คุณสนใจ ต้องเชื่อมโยงกับองค์ประกอบบางอย่างอย่างแน่นหนา (เช่น กล่องข้อความหรือรายการดรอปดาวน์) คุณต้องคำนวณสถานที่นี้เป็นพิกเซลหรือเป็นเปอร์เซ็นต์ ทำได้ไม่ยาก โดยเฉพาะอย่างยิ่งหากเลย์เอาต์ของไซต์มีโครงสร้างที่ชัดเจน

ขั้นตอนที่ 3

ระหว่างแท็ก BODY คุณต้องเพิ่มโค้ดการเลื่อนมาตรฐาน คุณสามารถค้นหาได้ในบทช่วยสอน html มีสองตัวเลือก - เพิ่มข้อมูลโค้ดนี้โดยตรงในโค้ด html ของหน้า หรือแนบในสไตล์ชีต css วิธีที่สองสะดวกกว่าถ้าคุณเปลี่ยนมากกว่าหนึ่งหน้า แต่ทั้งเว็บไซต์พร้อมกัน จากนั้นคุณต้องป้อนพารามิเตอร์สีของแถบเลื่อนมิฉะนั้นจะเป็นสีเทาและไม่น่าสนใจ รูปภาพแสดงและติดป้ายกำกับองค์ประกอบการเลื่อน ต้องป้อนพารามิเตอร์ในลักษณะเดียวกับที่แสดงในรูป โดยคั่นด้วยเครื่องหมายอัฒภาค

ขั้นตอนที่ 4

ตอนนี้คุณควรทดสอบการแก้ไขของคุณอย่างแน่นอน หากต้องการให้แถบเลื่อนดูเหมือนกันในทุกเบราว์เซอร์ ให้ตรวจสอบในเบราว์เซอร์หลัก - Internet Explorer, Mozilla Firefox และ Opera หากไม่ได้ผลกับวิธีใดวิธีหนึ่ง ให้กลับไปที่ขั้นตอนแรกและแก้ไขข้อผิดพลาด