เค้าโครงของเหลวยืดหยุ่น CSS ตรงกับการแสดงเนื้อหาที่แตกต่างกัน

วันนี้เมื่อจอภาพของผู้ใช้มีขนาดใหญ่ขึ้นเรื่อย ๆ การจัดวางความกว้างที่เป็นของแข็ง 1024*768 ก่อนหน้านี้จะกลายเป็นที่นิยมมากขึ้นเรื่อย ๆ . หน้าจอขยะในฐานะนักออกแบบเว็บไซต์คุณมีความรับผิดชอบในการให้ส่วนต่อประสานกับผู้ใช้ที่ดีในกลุ่มนี้

แน่นอนว่าเพื่อลดการสูญเสียของหน้าจอประเภทนี้การใช้เลย์เอาต์ของเหลวแบบยืดหยุ่นเป็นทางออกที่ดีที่สุด อย่างไรก็ตามเนื่องจากข้อ จำกัด ต่าง ๆ เว็บเพจปัจจุบันไม่ได้ติดตั้งเงื่อนไขอย่างเต็มที่สำหรับการใช้เลย์เอาต์ยืดหยุ่นของเหลวอย่างเต็มที่ (โดยเฉพาะอย่างยิ่งการทำลายมาตรฐานที่ไร้ยางอายของผู้ผลิตเบราว์เซอร์และการสนับสนุนมาตรฐาน CSS ฯลฯ ) ในฐานะพ่อค้าคนกลางระหว่างผู้ใช้และผู้ผลิตเราสามารถปรับให้เข้ากับช่องว่างระหว่างทั้งสองด้วยทัศนคติที่เข้ากันได้ ดังนั้นในฐานะที่เป็นวิธีแก้ปัญหาในช่วงเปลี่ยนผ่านมีเค้าโครงดังกล่าว: เลย์เอาต์ความยืดหยุ่น + ความกว้างของแข็ง

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

มาพูดคุยเรื่องไร้สาระน้อยลงและกลับไปที่จุดมาสร้างโครงสร้างเค้าโครง

แรกสร้างเลเยอร์โครงสร้าง:

มาวิเคราะห์เลเยอร์โครงสร้าง ในการออกแบบวิธีนี้?

เราตั้งค่าคอนเทนเนอร์เสื้อคลุมและส่วนท้ายให้มีความกว้าง 100% เพื่อปรับให้เข้ากับความกว้างของหน้าจอโดยอัตโนมัติ และตั้งค่าส่วนหัวส่วนหัวให้มีความกว้าง 100% ด้วยวิธีนี้เราสามารถแทรกภาพกระเบื้องแนวนอนลงในส่วนหัวและส่วนท้ายเพื่อให้พื้นหลังของส่วนหัวและส่วนท้ายสามารถเติมเต็มพื้นที่หน้าจอทั้งหมดในแนวนอนภายใต้หน้าจอขนาดใหญ่

ในฐานะที่เป็นเนื้อหาหลักวิธีการทั่วไปของเราคือปล่อยให้มันอยู่ตรงกลางและปล่อยช่องว่างทั้งสองด้านเมื่อความละเอียดมีขนาดใหญ่ขึ้น เนื่องจากพื้นที่ส่วนหัวได้รับการตั้งค่าเป็นความกว้าง 100% เราจึงเพิ่มชั้นในคอนเทนเนอร์เข้ากับส่วนหัวซึ่งทำหน้าที่เป็นพาหะของเนื้อหาข้อความส่วนหัวจริง ปล่อยให้มันเป็นศูนย์กลางโดยอัตโนมัติ

ด้วยวิธีนี้ข้อความของส่วนหัวลอยชั้นบนของ haeader

ในทำนองเดียวกันส่วนท้ายของส่วนท้ายยังสามารถนำไปใช้ในลักษณะนี้

ในชั้นโครงสร้างข้างต้นฉันไม่ได้ใช้วิธีนี้ในพื้นที่เนื้อหากลาง แต่ทำวิธีแก้ปัญหาเล็กน้อย เราควรทำอย่างไรถ้าเราไม่ปรากฏกลวงทั้งสองด้านของข้อความภายใต้ความละเอียดขนาดใหญ่แน่นอน แน่นอนเพื่อลดการทำรังเราสามารถใช้วิธีแก้ปัญหาได้ เราสามารถเพิ่มภาพขนาดใหญ่ลงในพื้นหลังในร่างกายและใช้ตำแหน่งพื้นหลังเพื่อวางตำแหน่งภาพตรงกลางเพื่อให้ภาพทั้งสองด้านของพื้นที่เนื้อหาจะปรากฏขึ้น

บล็อกนี้เป็นกรณีเฉพาะ และเนื้อหาของข้อความจะปรากฏขึ้นในศูนย์กลางเสมอ

เพื่อแสดงให้เห็นถึงผลกระทบเราเพิ่มการปรับสีอื่น ๆ และสไตล์สุดท้ายมีดังนี้: