ลอยข้ามช่วยเหลือใน HTML

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

HTML และ CSS

ในขณะที่ HTML นำเสนอ meta-language ที่ติดแท็กซึ่งกำหนดลักษณะของเว็บเพจที่จะปรากฏในเว็บเบราว์เซอร์พลังของการออกแบบเว็บไซต์ที่แท้จริงนั้นมาจากเมื่อคุณผสม HTML กับ Cascading Style Sheets CSS กำหนดพฤติกรรมสำหรับองค์ประกอบที่ฝังในไฟล์ HTML การสร้างเลย์เอาต์สากลสำหรับหน้า เอกสาร HTML หลายรายการสามารถอ้างถึงหน้า CSS เดียวกันซึ่งหมายความว่าคุณสามารถบังคับใช้ลักษณะที่ปรากฏเป็นประจำในทุกหน้าของคุณ

ฝ่าย HTML และลอยตัว

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

ลอยใน CSS และ HTML

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

นี่คือเนื้อหาบางส่วนภายในแผนก

Clear, Margins และ Padding

นอกเหนือจากพื้นฐานการใช้แอตทริบิวต์ float คุณยังสามารถใช้รายการอื่น ๆ เช่นแอตทริบิวต์ clear, margin และ padding แอตทริบิวต์ที่ชัดเจนช่วยให้แน่ใจว่าไม่มีเนื้อหาอื่นปรากฏในบรรทัดเดียวกันกับองค์ประกอบลอย ระยะขอบควบคุมพื้นที่รอบ ๆ ช่องว่างด้านซ้ายและด้านล่างของการหาร Padding ควบคุมพื้นที่ภายในในการแบ่งระหว่างเนื้อหาและเส้นขอบของการแบ่ง รายการทั้งสามนี้ร่วมกันสามารถสร้างส่วนที่สะอาดและมีรูปทรงเป็นกล่องซึ่งอนุญาตหรือไม่อนุญาตให้ใช้ข้อความและรูปภาพอื่น ๆ ล้อมรอบ

โพสต์ยอดนิยม