คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML หากคุณต้องการเรียกดูบทช่วยสอน CSS โปรดคลิกที่นี่
ด้านบน: ภาษามาร์กอัป - การเปลี่ยนรูปภาพ บทที่ 15 ระบุสไตล์สำหรับ <body>
หนึ่งในประโยชน์ของการตั้งค่าเนื้อหาและเอฟเฟกต์การแสดงผลแยกต่างหากคือความยืดหยุ่น ด้วยการใช้ CSS เพื่อควบคุมเค้าโครงของเว็บไซต์ (วิธีที่ใช้ในบทที่ 12) คุณสามารถควบคุมองค์ประกอบการออกแบบของเว็บไซต์ทั้งหมดเปลี่ยนกฎสองสามข้อและอัปเดตหน้าหลายพันหน้าทันที
หนึ่งในตัวอย่างความสะดวกสบายของการใช้ CSS เพื่อควบคุมเค้าโครงคือการระบุสไตล์สำหรับ <body> และโดยการเพิ่มคลาสหรือ ID ลงในแท็ก <body> คุณสามารถปรับแต่งแท็กใด ๆ ในหน้า ไม่มีปัญหาของคำจำกัดความซ้ำเลย
ในบทนี้เราจะสำรวจวิธีการใช้โครงสร้างแท็กเพื่อสลับการกำหนดค่าเค้าโครงที่แตกต่างกันสองแบบโดยการเพิ่มคลาสลงในแท็ก <body> เลย์เอาต์สองคอลัมน์หรือสามคอลัมน์
เช่นเดียวกับเมื่อออกแบบเว็บไซต์สำหรับ บริษัท ที่รวดเร็วโดยใช้เทคโนโลยีเค้าโครง CSS หนึ่งในความท้าทายคือ: แม้ว่าทุกหน้าจะใช้การนำทางเดียวกันและสิ้นสุดของหน้าเว็บ
เค้าโครงแรกคือหน้าดัชนี (หน้าแรก) ดูรูปที่ 15-1 นี่คือหน้าเว็บที่มีฟังก์ชั่นการนำทางทำให้ผู้ใช้สามารถเจาะโครงสร้างไดเรกทอรีของเว็บไซต์ต่อไปได้ เราตัดสินใจใช้เลย์เอาต์สามคอลัมน์สำหรับหน้าเหล่านี้
รูปที่ 15-1 การสาธิตดัชนีสามคอลัมน์ของ บริษัท Fast Company
เค้าโครงหน้าสองคือหน้าภายในรูปที่ 15-2 หน้าใด ๆ ที่ให้ความรู้สึกเหมือนปลายทางใช้เค้าโครงนี้ เพื่อปรับปรุงความสามารถในการอ่านเราตัดสินใจที่จะละเว้นคอลัมน์ด้านซ้ายและออกจากคอลัมน์สองคอลัมน์นั่นคือคอลัมน์ขนาดใหญ่หนึ่งคอลัมน์วางเนื้อหาและโฆษณาอื่น ๆ
รูปที่ 15-2 การสาธิตหน้าข้อความสองคอลัมน์ของ บริษัท Fast Company
เหตุผลที่ฉันอธิบายว่านี่ไม่ได้เป็นการพิสูจน์ว่าเราได้ร้าวความลึกลับที่ยิ่งใหญ่ของเลย์เอาต์บางอย่าง แต่เพื่อแสดงให้เห็นว่าการเพิ่มคลาสลงในแท็ก <body> สามารถปรับความกว้างของคอลัมน์และวางหรือละเว้นคอลัมน์ที่สามตามรูปร่างหน้า เมื่อสร้างเอฟเฟกต์ดังกล่าวจะไม่มีการทำซ้ำกฎใด ๆ เลยและไม่มีการแนะนำแผ่นสไตล์เพิ่มเติม มีการเพิ่มเครื่องหมายและโครงสร้างสไตล์
หลังจากเริ่มอธิบายโครงสร้างการทำเครื่องหมายที่ใช้ร่วมกันโดยทั้งสองหน้าเรื่องเล่าเหล่านี้จะเริ่มสมเหตุสมผล เพื่อให้ได้เค้าโครงคอลัมน์จะใช้วิธีการวางตำแหน่งสัมบูรณ์ที่กล่าวถึงในบทที่ 12
โครงสร้างแท็กที่เรียบง่ายของหน้าข้อความมีลักษณะเช่นนี้:
<div id = ส่วนหัว>
... ข้อมูลส่วนหัวที่นี่ ...
</div>
<div id = เนื้อหา>
... เนื้อหาที่นี่ ...
</div>
<div id = ขวา>
... ข้อมูลคอลัมน์ที่ถูกต้อง ...
</div>
<div id = footer>
... ข้อมูลส่วนท้าย ...
</div>
การใช้กฎ CSS เป็น #Content และ #Footer รวมถึงแพตช์ขวาขวาที่เพียงพอที่จะใช้วิธีการวางตำแหน่งแบบสัมบูรณ์เพื่อใส่ลงใน #right ในตัวอย่างนี้ 190 พิกเซลก็เพียงพอแล้ว
#Content, #FOOTER {
มาร์จิ้น: 10px 190px 10px 10px;
-
สำหรับหน้าดัชนีโครงสร้างมาร์กอัปนั้นเหมือนกันดังนั้นจึงไม่จำเป็นต้องคัดลอกกฎ CSS ที่ใช้ร่วมกัน แต่มีการเพิ่ม <div> พิเศษทางด้านซ้ายของ #Content เป็นคอลัมน์ที่สาม (#Left)
<div id = ส่วนหัว>
... ข้อมูลส่วนหัวที่นี่ ...
</div>
<div id = เนื้อหา>
... เนื้อหาที่นี่ ...
</div>
<div id = ซ้าย> ... ข้อมูลคอลัมน์ซ้าย ... </div> <div id = ขวา> ... ข้อมูลคอลัมน์ที่ถูกต้อง ... </div><div id = footer>
... ข้อมูลส่วนท้าย ...
</div>
สำหรับโครงสร้างสามคอลัมน์นี้ไม่เพียง แต่เราควรตั้งค่าแพตช์ด้านนอกที่ถูกต้องสำหรับ #Content และ #Footer เพื่อรองรับคอลัมน์ด้านขวา แต่เราควรตั้งค่าแพตช์ด้านนอกด้านซ้ายเพื่อรองรับคอลัมน์ซ้ายที่เพิ่มใหม่
อย่างไรก็ตามแพทช์ด้านนอกด้านซ้ายได้ถูกตั้งค่าเป็น 10 พิกเซลเพื่อให้ตรงกับเค้าโครงหน้าข้อความที่ตั้งไว้ล่วงหน้าซึ่งมีคอลัมน์คู่เท่านั้น
ว้าวเราติดอยู่เราจะดำเนินการต่อได้อย่างไร? กรุณาอ่านต่อ
หน้าก่อนหน้า 1 2 3 หน้าถัดไปอ่านข้อความเต็ม