บล็อกแนวนอนด้านล่างสุดของเค้าโครงหน้ามักเรียกว่า "ส่วนท้าย" ในนั้น เช่นเดียวกับในบล็อกอื่น ๆ ของหน้า องค์ประกอบของการออกแบบจะถูกวาง แต่แตกต่างจากส่วนอื่นๆ ปัญหาเฉพาะมักเกิดขึ้นกับตำแหน่งของบล็อกนี้โดยเฉพาะ พวกเขาเชื่อมโยงกับข้อเท็จจริงที่ว่าเบราว์เซอร์ต่างๆ เข้าใจมาตรฐานของภาษา CSS แตกต่างกัน และอาจเป็นเรื่องยากมากที่จะให้ส่วนท้ายอยู่ที่ขอบด้านล่างของหน้าต่างเบราว์เซอร์ ด้านล่างนี้คือรหัสสำหรับหนึ่งในวิธีแก้ไขปัญหานี้
จำเป็น
ความรู้พื้นฐานเกี่ยวกับ CSS และ HTML
คำแนะนำ
ขั้นตอนที่ 1
ในบรรทัดแรกของซอร์สโค้ดของหน้า ให้อ้างอิงถึงข้อกำหนดเฉพาะของ XHTML 1.0 Transitional:
ขั้นตอนที่ 2
วางบล็อกหลักของโครงสร้างหน้าไว้ภายในเนื้อหาของเอกสาร (ระหว่าง และ แท็ก) บล็อกที่จะวางเนื้อหาหลักจะต้องประกอบด้วยสองชั้นที่ซ้อนกัน ตัวอย่างเช่น ให้ตัวระบุตัวนอกมีตัวระบุ OuterDiv และตัวระบุตัวใน - InnerDiv:
นี่คือที่ที่เนื้อหาหลักของหน้าจะเป็น
ข้างหลังพวกเขาวางบล็อกส่วนท้ายที่มีตัวระบุเช่น FooterDiv:
ส่วนท้ายของหน้า
ขั้นตอนที่ 3
วางลิงก์ไปยังไฟล์ภายนอกที่มีคำอธิบายสไตล์ css ในส่วนหัวของโค้ด HTML (ระหว่างแท็กและแท็ก)
@import "footerStyle.css";
ขั้นตอนที่ 4
บันทึกรหัสมาสเตอร์เพจที่สมบูรณ์ลงในไฟล์ที่มีนามสกุล html อาจมีลักษณะดังนี้:
กดส่วนท้าย
@import "footerStyle.css";
นี่คือที่ที่เนื้อหาหลักของหน้าจะเป็น
ส่วนท้ายของหน้า
ขั้นตอนที่ 5
สร้างไฟล์สไตล์ชีต - ไฟล์ข้อความธรรมดาที่ควรบันทึกด้วยนามสกุล css และชื่อที่คุณระบุในโค้ด HTML (footerStyle.css) เขียนคำอธิบายลักษณะต่อไปนี้สำหรับบล็อกที่ใช้ในเพจลงในไฟล์นี้:
* {ระยะขอบ: 0; ช่องว่างภายใน: 0}
html เนื้อหา {ความสูง: 100%;}
ร่างกาย {
ตำแหน่ง: ญาติ;
สี: #222222;
}
#OuterDiv {
ระยะขอบ: 0;
ความสูงขั้นต่ำ: 100%;
พื้นหลัง: #aaaaaa;
สี: #222222;
}
* html #OuterDiv {ความสูง: 100%;}
#FooterDiv {
ตำแหน่ง: ญาติ;
ชัดเจน: ทั้งสอง;
ขอบบน: -60px;
ความสูง: 60px;
ความกว้าง: 100%;
พื้นหลังสี: DarkBlue;
จัดข้อความ: ศูนย์;
สี: #eeeeff;
}
. InnerDiv {
ความกว้าง: 100%;
ลอย: ซ้าย;
}