ในปัจจุบัน เนื่องจากจอภาพของผู้ใช้มีขนาดใหญ่ขึ้นเรื่อยๆ เลย์เอาท์แบบโซลิดไวด์ธแบบเดิม 1024*768 จึงล้าสมัยมากขึ้นเรื่อยๆ สำหรับผู้ใช้ที่มีหน้าจอขนาดใหญ่ พื้นที่ว่างทั้งสองด้านทำให้ผู้คนรู้สึกประทับใจตั้งแต่แรกเห็น เสียเปล่า ในฐานะนักออกแบบเว็บไซต์ คุณมีหน้าที่รับผิดชอบในการมอบอินเทอร์เฟซผู้ใช้ที่ดีให้กับผู้ใช้กลุ่มนี้
แน่นอนว่าเพื่อลดการสิ้นเปลืองหน้าจอ การใช้เลย์เอาต์แบบยืดหยุ่นเป็นทางออกที่ดีที่สุด โดยสามารถใช้พื้นที่หน้าจอได้เต็มที่และแสดงเนื้อหาแบบเต็มหน้าจอได้ไม่ว่าคุณจะมีความละเอียดเท่าใด อย่างไรก็ตาม เนื่องจากข้อจำกัดหลายประการ หน้าเว็บปัจจุบันจึงยังไม่พร้อมที่จะปรับใช้รูปแบบยืดหยุ่นที่ลื่นไหลอย่างเต็มที่ (โดยเฉพาะอย่างยิ่ง ผู้ผลิตเบราว์เซอร์ที่เหยียบย่ำมาตรฐานอย่างไม่เต็มใจและการสนับสนุนมาตรฐาน CSS ที่ไม่สมบูรณ์ เป็นต้น) ในฐานะคนกลางระหว่างผู้ใช้และผู้ผลิต เราสามารถปรับตัวให้เข้ากับช่องว่างระหว่างสองสิ่งนี้ได้ด้วยความคิดที่เข้ากันได้เท่านั้น ดังนั้นเพื่อเป็นการแก้ปัญหาเฉพาะกาลจึงมีเลย์เอาต์ดังกล่าว: เลย์เอาต์แบบยืดหยุ่น + ความกว้างคงที่
ความยืดหยุ่นที่กล่าวถึงในที่นี้หมายความว่าพื้นหลังจะปรับให้เข้ากับความกว้างของหน้าจอ ในขณะที่ความกว้างคงที่หมายความว่าเนื้อหาข้อความสามารถจัดกึ่งกลางโดยอัตโนมัติในหน้าจอกว้างหรือหน้าจอแคบ เอาชีวิตรอดในรอยแตกเพื่อตอบสนองความต้องการของผู้ใช้ด้วยความละเอียดขนาดที่แตกต่างกัน การออกแบบที่แสดงด้านล่างเป็นตัวอย่างทั่วไป
เพื่อไม่ให้เป็นการเสียเวลา มาเริ่มธุรกิจกันดีกว่า
ขั้นแรกให้สร้างชั้นโครงสร้าง:
| <div id="wrapper"> <div id="main" class="clearfix"> <div id="ส่วนหัว"> <div id="inheader"></div> </div> <div id="เนื้อหา"></div> </div> </div> <div id="ส่วนท้าย"> <div id="ในเท้า"></div> </div> |
วิเคราะห์เลเยอร์โครงสร้าง โดยทั่วไปหน้าเว็บประกอบด้วยสามส่วน: ส่วนหัว พื้นที่เนื้อหา และส่วนท้าย เราใส่ส่วนหัวและเนื้อหาลงในเลเยอร์คอนเทนเนอร์ ชื่อ wrapper และแยกส่วนท้าย เรียกว่าส่วนท้าย เหตุใดจึงออกแบบเช่นนี้ เราต้องการให้ส่วนท้ายนี้อยู่ด้านล่างสุดอย่างแน่นอนแม้ว่าพื้นที่เนื้อหาจะน้อยกว่าหนึ่งหน้าจอก็ตาม
เราตั้งค่าความกว้างของคอนเทนเนอร์ทั้งสอง ได้แก่ กระดาษห่อและส่วนท้ายเป็น 100% เพื่อให้ปรับให้เข้ากับความกว้างของหน้าจอโดยอัตโนมัติ และยังกำหนดพื้นที่ส่วนหัวให้มีความกว้าง 100% ด้วยวิธีนี้ เราสามารถแทรกรูปภาพที่สามารถเรียงต่อกันในแนวนอนในส่วนหัวและส่วนท้าย เพื่อให้พื้นหลังของส่วนหัวและส่วนท้ายสามารถเติมเต็มพื้นที่หน้าจอทั้งหมดในแนวนอนบนหน้าจอขนาดใหญ่
สำหรับเนื้อหาข้อความหลัก วิธีการทั่วไปของเราคือแสดงไว้ตรงกลางเมื่อความละเอียดมีขนาดใหญ่ขึ้น โดยเว้นที่ว่างไว้ทั้งสองด้าน เนื่องจากพื้นที่ส่วนหัวได้รับการตั้งค่าให้มีความกว้าง 100% เราจึงเพิ่มคอนเทนเนอร์อีกชั้นในส่วนหัว ซึ่งทำหน้าที่เป็นพาหะของเนื้อหาข้อความส่วนหัวที่แท้จริง จากนั้น เราจึงตั้งค่าความกว้างคงที่ เช่น ความกว้าง 960 พิกเซล และปล่อยให้มันเป็นศูนย์กลางของมันเอง
| #inheader{width:960px;height:110px; margin:0 auto; } |
ด้วยวิธีนี้ ข้อความหลักของส่วนหัวของหน้าจะลอยอยู่ที่ชั้นบนของ haeader สามารถตั้งค่าด้วยภาพพื้นหลังที่แตกต่างกันเพื่อสร้างภาพซ้อนทับได้ เอฟเฟกต์ส่วนหัวซึ่งสามารถปรับความละเอียดหน้าจอที่ใหญ่ขึ้นได้โดยอัตโนมัติ
ในทำนองเดียวกัน ส่วนท้ายก็สามารถนำมาใช้ได้โดยใช้วิธีนี้
ในเลเยอร์โครงสร้างด้านบน ฉันไม่ได้ใช้วิธีการนี้ในพื้นที่เนื้อหาตรงกลาง แต่ได้ทำการเปลี่ยนแปลงเล็กน้อย เราจะเห็นได้ว่าในพื้นที่เนื้อหาไม่มีคอนเทนเนอร์แบบฝัง มีเพียงคอนเทนเนอร์เดียวเท่านั้น เราควรทำอย่างไรหากเราต้องการป้องกันไม่ให้ข้อความทั้งสองด้านปรากฏว่างเปล่าที่ความละเอียดสูง แน่นอนว่าคุณสามารถใช้วิธีส่วนหัวและส่วนท้ายและเพิ่ม div ลงในเนื้อหาได้ แน่นอน เพื่อลดการซ้อน เราสามารถใช้วิธีแก้ไขปัญหาชั่วคราวได้ เราสามารถเพิ่มรูปภาพขนาดใหญ่มากให้กับพื้นหลังของร่างกาย และใช้ตำแหน่งพื้นหลังเพื่อวางตำแหน่งและจัดกึ่งกลางรูปภาพ เพื่อให้รูปภาพทั้งสองด้านของพื้นที่เนื้อหาปรากฏขึ้น
บล็อกนี้เป็นกรณีเฉพาะ หากคุณดูภาพทั้งสองด้านของบล็อกนี้ด้วยความละเอียดสูงแล้วย่อหน้าต่างจะเห็นว่ามีเพียงพื้นที่เล็ก ๆ ของรูปภาพทั้งสองด้านเท่านั้นที่แสดงที่ 1024* 768 ในขณะที่ข้อความหลักจะแสดงอยู่ตรงกลางเสมอ
เพื่อแสดงให้เห็นถึงเอฟเฟกต์ เราได้เพิ่มการปรับแต่งสีอื่นๆ และสไตล์สุดท้ายมีดังนี้:
| *{ระยะขอบ:0;ช่องว่างภายใน:0;} html, body, #wrapper {ความสูง: 100%;ขนาดตัวอักษร:12px;} #กระดาษห่อ{ความกว้าง:100%;พื้นหลัง:#777;} ร่างกาย > #wrapper {ความสูง: อัตโนมัติ; ความสูงขั้นต่ำ: 100%;} #main {padding-bottom: 54px;min-width:960px;}/* ต้องใช้ความสูงเดียวกันกับส่วนท้าย ความกว้างขั้นต่ำสามารถแก้ไขได้โดยการเพิ่ม JS ใน ie6*/ #header{text-align:center;color:#fff;พื้นหลัง:#333;} #inheader{width:960px;height:110px;line-height:110px;margin:0 auto;พื้นหลัง:#CC9933;} h3{ขนาดตัวอักษร:14px;line-height:50px;} #inheader p{font-size:12px;line-height:30px;} #ส่วนท้าย { ตำแหน่ง: ญาติ; ขอบด้านบน: -54px; /* ค่าลบของส่วนท้าย*/ ความสูง: 54px;/* ความสูงส่วนท้าย*/ ความกว้าง:100%; min-width:960px;/*ความกว้างขั้นต่ำแก้ไขได้โดยการเพิ่ม JS ใน ie6*/ ชัดเจน:ทั้งสอง; พื้นหลัง:#666; การจัดตำแหน่งข้อความ: กึ่งกลาง; สี:#fff; - #infoot{height:54px;line-height:54px;width:960px;margin:0 auto;พื้นหลัง:#CC9966;} #ส่วนท้าย p{line-height:26px;} #content{พื้นหลัง:#999;width:960px;margin:0 อัตโนมัติ;ความสูง:692px;} #content p{line-height:30px;padding:0 30px;color:#fff;} /*หมายเหตุ: สิ่งที่ต้องสังเกตคือค่าการเติมของ #main ความสูงของส่วนท้าย และค่าระยะขอบติดลบจะต้องสอดคล้องกัน ต่อไปนี้คือ Universal float closure Clearfix Hack*/ .clearfix: หลังจาก { เนื้อหา: "."; จอแสดงผล: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; การมองเห็น: ซ่อนเร้น;} .clearfix {จอแสดงผล: อินไลน์บล็อก;} /* ซ่อนจาก IE-mac */ * html .clearfix { ความสูง: 1%;} .clearfix {แสดง: บล็อก;} /* สิ้นสุดการซ่อนจาก IE-mac */ |