เมื่อวางโครงการถัดไป (หรือเพียงแค่ออกแบบตารางเค้าโครง) หลายคนต้องเผชิญกับภาวะที่กลืนไม่เข้าคายไม่ออก - ในการใช้ความกว้างของเค้าโครงคงที่หรือตาราง "ยาง" ที่ปรับให้เข้ากับขนาดของหน้าต่างเบราว์เซอร์
วิธีแก้ปัญหาแต่ละข้อมีข้อดีและข้อเสียของตัวเอง ฉันต้องการมุ่งเน้นไปที่ minuses เนื่องจากโดยปกติแล้วจะสะท้อนถึงข้อเสียของการตัดสินใจเหล่านี้อย่างชัดเจนซึ่งเราต้องเลือกระหว่างความชั่วร้ายสองประการ
ความกว้างคงที่ของตารางเลย์เอาต์ เลย์เอาต์ถูกบังคับให้มีขนาดแนวนอน 960-980 พิกเซล (เพื่อให้ทุกอย่างรวมอยู่ในอุปกรณ์ส่วนใหญ่ที่มีความละเอียดมากที่สุด) ซึ่งขนาดหน้าต่างแนวนอนขนาดใหญ่จะดูเย็นชา - แถบแนวตั้งบาง ๆ ของหน้าที่มีประโยชน์ เนื้อหาและพื้นที่ขนาดใหญ่ที่ไม่ได้ใช้ข้ามด้านข้าง ตารางเค้าโครง "ยาง" พาดผ่านความกว้างของหน้าต่าง อีกครั้งด้วยขนาดหน้าต่างแนวนอนขนาดใหญ่ มีปัญหาอีกอย่างหนึ่งคือ บรรทัดของข้อความยาวมากและการอ่านจะกลายเป็น ไม่สะดวกสบายเท่าที่เราต้องการปัญหาทั่วไปอีกประการหนึ่งของการแก้ปัญหานี้คือระยะขอบด้านข้างที่มีขนาดหน้าต่างแนวนอนขนาดใหญ่ไม่สอดคล้องกับขนาดแนวนอนขององค์ประกอบทางสายตาอีกต่อไป ซึ่งไม่ได้เพิ่มความสะดวกสบายเมื่อดูเค้าโครง
ฉันต้องการเสนอวิธีแก้ปัญหาง่ายๆ - จำกัดขนาดแนวนอนขั้นต่ำให้เป็นค่าคงที่ในหน่วยพิกเซล และทำให้ค่าสัมพัทธ์สูงสุดเป็นเปอร์เซ็นต์ของความกว้างของหน้าต่าง นี่เป็นวิธีแก้ปัญหาเล็กน้อยมาก ด้วยวิธีง่ายๆข้อกำหนด CSS อีก 2 เวอร์ชัน
อัปเดต: ฉันต้องการจองว่าเราไม่ได้พูดถึงเอฟเฟกต์ยางแบบคลาสสิกและการปรับให้เข้ากับความละเอียดทั้งหมด แต่เป็นเพียงช่วงความละเอียดที่สมเหตุสมผลซึ่งเค้าโครงได้รับการออกแบบเท่านั้น ในตัวอย่างด้านล่างนี้ นี่คือช่วงความละเอียดเดสก์ท็อปแบบคลาสสิกที่มีขนาดความละเอียดแนวนอน 1024 พิกเซลฉันขอเน้นอีกครั้ง:โพสต์ไม่ได้พูดถึงโซลูชันสำหรับอุปกรณ์ทุกประเภทและทุกช่วงความละเอียด ปัญหานี้ไม่สามารถแก้ไขได้ในหลักการภายในกรอบของเค้าโครงเดียวในการแก้ปัญหาไม่ทางใดก็ทางหนึ่งจะต้องมีหลายเลย์เอาต์ แมลงวันแยกจากกัน
สร้างคอนเทนเนอร์เค้าโครง:
... ...
เราตกแต่งด้วยโค้ดสไตล์เรียบง่าย:
div.page-container ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 75%; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; )
อย่างไรก็ตาม วิธีแก้ปัญหานี้อาจดูไม่เพียงพอสำหรับบางคน เนื่องจากขนาดหน้าต่างแนวนอนที่ใหญ่มาก ปัญหาเกี่ยวกับความยาวของเส้นก็ปรากฏขึ้นอีกครั้ง สิ่งนี้สามารถแก้ไขได้ด้วยเทคนิคเพิ่มเติมง่ายๆ ไม่แพ้กัน: สร้างคอนเทนเนอร์ภายนอกเพิ่มเติมภายในคอนเทนเนอร์ที่อธิบายไว้แล้วและจำกัดความกว้างสูงสุดให้เป็นค่าคงที่ (สำหรับฉันแล้วดูเหมือนว่าค่าในช่วง 1,400-1600 พิกเซลนั้น เหมาะที่สุด). อีกครั้งเราใช้เท่านั้น เครื่องมือซีเอสเอส 2.0. วิธีแก้ปัญหานี้แทนที่จะเป็นวิธีที่เสนอในความคิดเห็นแรก นอกจากนี้ง่ายๆ width เป็นเปอร์เซ็นต์สำหรับคอนเทนเนอร์ดั้งเดิมจะใช้งานได้ใน IE ซึ่งจนถึงเวอร์ชัน 9 ไม่เข้าใจการระบุค่าพร้อมกัน
การเพิ่ม HTML:
...
...
และเปลี่ยน CSS เล็กน้อย:
div.page-container ( ความกว้างสูงสุด: 75%; ความกว้างขั้นต่ำ: 960px; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; ) div.page-container-inner ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 1600px; ระยะขอบ : 0 อัตโนมัติ;
อย่างที่คุณเห็นวิธีแก้ปัญหานั้นง่ายมากและค่อนข้างเป็นสากล มันสามารถนำไปใช้กับองค์ประกอบบล็อกใดก็ได้
เมื่อวางโครงการถัดไป (หรือเพียงแค่ออกแบบตารางเค้าโครง) หลายคนต้องเผชิญกับภาวะที่กลืนไม่เข้าคายไม่ออก - ในการใช้ความกว้างของเค้าโครงคงที่หรือตาราง "ยาง" ที่ปรับให้เข้ากับขนาดของหน้าต่างเบราว์เซอร์
วิธีแก้ปัญหาแต่ละข้อมีข้อดีและข้อเสียของตัวเอง ฉันต้องการมุ่งเน้นไปที่ minuses เนื่องจากโดยปกติแล้วจะสะท้อนถึงข้อเสียของการตัดสินใจเหล่านี้อย่างชัดเจนซึ่งเราต้องเลือกระหว่างความชั่วร้ายสองประการ
ความกว้างคงที่ของตารางเลย์เอาต์ เลย์เอาต์ถูกบังคับให้มีขนาดแนวนอน 960-980 พิกเซล (เพื่อให้ทุกอย่างรวมอยู่ในอุปกรณ์ส่วนใหญ่ที่มีความละเอียดมากที่สุด) ซึ่งขนาดหน้าต่างแนวนอนขนาดใหญ่จะดูเย็นชา - แถบแนวตั้งบาง ๆ ของหน้าที่มีประโยชน์ เนื้อหาและพื้นที่ขนาดใหญ่ที่ไม่ได้ใช้ข้ามด้านข้าง ตารางเค้าโครง "ยาง" พาดผ่านความกว้างของหน้าต่าง อีกครั้งด้วยขนาดหน้าต่างแนวนอนขนาดใหญ่ มีปัญหาอีกอย่างหนึ่งคือ บรรทัดของข้อความยาวมากและการอ่านจะกลายเป็น ไม่สะดวกสบายเท่าที่เราต้องการปัญหาทั่วไปอีกประการหนึ่งของการแก้ปัญหานี้คือระยะขอบด้านข้างที่มีขนาดหน้าต่างแนวนอนขนาดใหญ่ไม่สอดคล้องกับขนาดแนวนอนขององค์ประกอบทางสายตาอีกต่อไป ซึ่งไม่ได้เพิ่มความสะดวกสบายเมื่อดูเค้าโครง
ฉันต้องการเสนอวิธีแก้ปัญหาง่ายๆ - จำกัดขนาดแนวนอนขั้นต่ำให้เป็นค่าคงที่ในหน่วยพิกเซล และทำให้ค่าสัมพัทธ์สูงสุดเป็นเปอร์เซ็นต์ของความกว้างของหน้าต่าง สิ่งนี้แก้ไขได้เล็กน้อยด้วยวิธีง่ายๆ ด้วยข้อกำหนด CSS อีก 2 เวอร์ชัน
อัปเดต: ฉันต้องการจองว่าเราไม่ได้พูดถึงเอฟเฟกต์ยางแบบคลาสสิกและการปรับให้เข้ากับความละเอียดทั้งหมด แต่เป็นเพียงช่วงความละเอียดที่สมเหตุสมผลซึ่งเค้าโครงได้รับการออกแบบเท่านั้น ในตัวอย่างด้านล่างนี้ นี่คือช่วงความละเอียดเดสก์ท็อปแบบคลาสสิกที่มีขนาดความละเอียดแนวนอน 1024 พิกเซลฉันขอเน้นอีกครั้ง:โพสต์ไม่ได้พูดถึงโซลูชันสำหรับอุปกรณ์ทุกประเภทและทุกช่วงความละเอียด ปัญหานี้ไม่สามารถแก้ไขได้ในหลักการภายในกรอบของเค้าโครงเดียวในการแก้ปัญหาไม่ทางใดก็ทางหนึ่งจะต้องมีหลายเลย์เอาต์ แมลงวันแยกจากกัน
สร้างคอนเทนเนอร์เค้าโครง:
... ...
เราตกแต่งด้วยโค้ดสไตล์เรียบง่าย:
div.page-container ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 75%; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; )
อย่างไรก็ตาม วิธีแก้ปัญหานี้อาจดูไม่เพียงพอสำหรับบางคน เนื่องจากขนาดหน้าต่างแนวนอนที่ใหญ่มาก ปัญหาเกี่ยวกับความยาวของเส้นก็ปรากฏขึ้นอีกครั้ง สิ่งนี้สามารถแก้ไขได้ด้วยเทคนิคเพิ่มเติมง่ายๆ ไม่แพ้กัน: สร้างคอนเทนเนอร์ภายนอกเพิ่มเติมภายในคอนเทนเนอร์ที่อธิบายไว้แล้วและจำกัดความกว้างสูงสุดให้เป็นค่าคงที่ (สำหรับฉันแล้วดูเหมือนว่าค่าในช่วง 1,400-1600 พิกเซลนั้น เหมาะที่สุด). ขอย้ำอีกครั้งว่าเราใช้เครื่องมือ CSS 2.0 เท่านั้น วิธีแก้ปัญหานี้ แทนที่จะเพิ่มความกว้างเป็นเปอร์เซ็นต์สำหรับคอนเทนเนอร์ดั้งเดิมตามที่เสนอในความคิดเห็นแรก จะใช้งานได้ใน IE ซึ่งจนถึงเวอร์ชัน 9 จะไม่เข้าใจการบ่งชี้ค่าพร้อมกัน
การเพิ่ม HTML:
...
...
และเปลี่ยน CSS เล็กน้อย:
div.page-container ( ความกว้างสูงสุด: 75%; ความกว้างขั้นต่ำ: 960px; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 0; ) div.page-container-inner ( ความกว้างขั้นต่ำ: 960px; ความกว้างสูงสุด: 1600px; ระยะขอบ : 0 อัตโนมัติ;
อย่างที่คุณเห็นวิธีแก้ปัญหานั้นง่ายมากและค่อนข้างเป็นสากล มันสามารถนำไปใช้กับองค์ประกอบบล็อกใดก็ได้
จากผู้เขียน: สวัสดีผู้อ่านบล็อกของฉันที่รัก! หลายๆ คนคงเคยได้ยินตำนานเกี่ยวกับมังกร ซานตาคลอส และสัตว์ร้ายที่ไม่อาจเข้าใจได้ที่เรียกว่า การออกแบบเว็บยาง ซึ่งสามารถเปลี่ยนรูปร่างของมันได้ ต้นฉบับของ John Tolkien จะบอกคุณเกี่ยวกับตัวละครตัวแรก พ่อแม่จะบอกคุณเกี่ยวกับตัวละครตัวที่สอง แต่ฉันรับข้อมูลเกี่ยวกับตัวละครที่สามเอง ไม่ว่ามันจะฟังดูแปลกแค่ไหน แต่ในบทความนี้ฉันจะพยายามเคี้ยวการออกแบบเว็บยางและพูดคุยเกี่ยวกับข้อดีและข้อเสียของมัน
เมื่อพัฒนาเว็บไซต์ อันดับแรกเว็บมาสเตอร์ควรได้รับคำแนะนำจากเป้าหมายของโครงการ หากเป็นสิ่งสำคัญสำหรับลูกค้าที่สามารถปรับหน้าเว็บให้เป็นหน้าจอมอนิเตอร์ได้แล้วล่ะก็ ความช่วยเหลือจะมาการออกแบบยาง (ปรับตัว)
รูปแบบนี้มีชื่อเนื่องจากความกว้างไม่ได้ตั้งค่าเป็นพิกเซล แต่เป็นเปอร์เซ็นต์ ด้วยความช่วยเหลือ หน้าจะเปิดขึ้นบนหน้าจอมอนิเตอร์ทั้งหมด โดยไม่คำนึงถึงความละเอียด
เพื่อให้อาชีพของคุณในฐานะนักออกแบบเว็บไซต์พัฒนาอย่างรวดเร็ว จำเป็นต้องศึกษาทิศทางนี้ ลูกค้าจำนวนมากที่มีฐานลูกค้าประจำที่รวมตัวกันอยู่แล้วเป็นที่ต้องการเป็นพิเศษ ณ จุดนี้ เนื่องจากพวกเขาต้องการมอบความสะดวกสบายสูงสุดแก่ผู้ใช้
กำเนิดของการออกแบบเว็บฟลูอิดจากการสังเกตที่น่าสนใจ เราสามารถสังเกตความจริงที่ว่าในประเทศของเรา ผู้เชี่ยวชาญเริ่มรับรู้ถึงการออกแบบเว็บไซต์ "ยาง" จากมุมมองเชิงบวกเร็วกว่าในโลกตะวันตก ความจริงก็คือเมื่อกำเนิดทิศทางของเว็บก็มาถึงบริเวณนี้ จำนวนมากเครื่องพิมพ์ใจแคบ
ผู้เชี่ยวชาญจากต่างประเทศไม่ได้ตระหนักถึงความเป็นไปได้ในการสร้างสิ่งที่ไม่คงที่ การพัฒนากราฟิก- แต่แนวคิดของ "เว็บ" และ "การออกแบบ" มาถึงเราเกือบจะเท่าเทียมกันซึ่งเป็นผลมาจากการที่นักพัฒนามองว่าความยืดหยุ่นในการมองเห็นของภาพดังกล่าวเป็นเสรีภาพในการสร้างสรรค์ตามปกติ
การออกแบบเว็บไซต์ที่ลื่นไหลและตอบสนองเป็นสิ่งเดียวกันหรือไม่ผู้คนมักสับสนระหว่างแนวคิดทั้งสองนี้ อย่างไรก็ตาม ไม่ใช่คำพ้องความหมายที่บริสุทธิ์สำหรับกันและกัน การออกแบบเว็บไซต์ที่ตอบสนองเกี่ยวข้องกับการทำงานกับเค้าโครงเว็บไซต์ที่แตกต่างกันเพื่อสร้างความสะดวกในการใช้งานสูงสุดบนอุปกรณ์ทุกประเภท โดยคำนึงถึงความละเอียดหน้าจอทุกประเภท
โดยจะปรับภาพโดยรวมให้เข้ากับหน้าจออย่าง “สมเหตุสมผล” โดยขึ้นอยู่กับขนาดของจอแสดงผลบนอุปกรณ์ จริงๆ แล้วการออกแบบที่ลื่นไหลคือหนึ่งในองค์ประกอบของการออกแบบเว็บไซต์แบบปรับเปลี่ยนได้ ในทางกลับกันจะเปลี่ยนแปลงเฉพาะสัดส่วนของหน้าเว็บเท่านั้น
ดังนั้น เราสามารถสรุปได้ว่าการออกแบบเว็บแบบตอบสนองเป็นการผสมผสานระหว่างยางและการปรับปรุงที่ก้าวหน้าอื่นๆ แม้ว่าจะมีคำจำกัดความที่เป็นที่ยอมรับ แต่บางครั้งความสับสนก็อาจเกิดขึ้นได้ เป็นเรื่องที่ไม่พึงประสงค์โดยเฉพาะอย่างยิ่งเมื่อมีความขัดแย้งในเรื่องนี้เกิดขึ้นกับลูกค้า ดังนั้นควรระมัดระวังและชี้แจงเสมอว่าลูกค้าหมายถึงอะไรเมื่อพูดถึงการออกแบบยางของไซต์
ประโยชน์ของการออกแบบเว็บไซต์ของไหลด้วยการออกแบบ Rubber CSS คุณสามารถออกแบบหน้าเว็บที่เติมเต็มทุกสิ่งได้ ที่ว่างเบราว์เซอร์โดยไม่คำนึงถึงขนาดหน้าจอ หากมีการเปลี่ยนแปลงการตั้งค่าที่เกี่ยวข้องกับสิทธิ์ โครงสร้างไซต์ทั้งหมดจะปรับใหม่ตามเงื่อนไขที่อัปเดต ปาฏิหาริย์และเวทมนตร์ใช่ไหม?
คุณสมบัตินี้ช่วยให้แน่ใจว่าหน้าเว็บจะครอบครองหน้าต่างเบราว์เซอร์อย่างสมบูรณ์ โดยไม่คำนึงว่ารูปภาพจะแสดงบน HTC ขนาดเล็กหรือบนขนาด 20 นิ้ว จอภาพไวด์สกรีน- นี่เป็นข้อได้เปรียบหลักของการออกแบบยางอย่างแท้จริง
ผู้ใช้ที่มีจอภาพขนาดเล็กไม่พบปัญหา แถบแนวนอนเลื่อน แต่บางครั้งพวกเขาก็รบกวนเจ้าของรูปแบบจอไวด์สกรีนขนาดใหญ่ ด้วยเหตุนี้ฝ่ายหลังจึงสามารถเพลิดเพลินกับภาพได้อย่างเต็มที่เพราะพื้นที่แสดงผลทั้งหมดจะถูกใช้อย่างมีประสิทธิภาพ
หากเราพิจารณาคำถามว่าการออกแบบเว็บยางเหมาะสำหรับเว็บไซต์ใด ทุกอย่างขึ้นอยู่กับเป้าหมายของลูกค้าอีกครั้ง ความยืดหยุ่นในการมองเห็นนี้จะดูดีบนไซต์เหล่านั้นที่ตำแหน่งบนหน้าเว็บเดียวเป็นสิ่งสำคัญ ปริมาณสูงสุดเนื้อหาและมาตรฐานด้านสุนทรียภาพจางหายไปในเบื้องหลัง
บนพื้นฐานนี้เองที่การออกแบบเว็บยางถูกนำมาใช้กันอย่างแพร่หลายในการสร้างพอร์ทัลข่าว บล็อก รวมถึงไซต์ข้อมูลทุกประเภท ในกรณีเหล่านี้ การใช้งานจะเหมาะสมที่สุด
แนวโน้มสมัยใหม่และแนวทางในการพัฒนาเว็บ
เรียนรู้อัลกอริทึมสำหรับการเติบโตอย่างรวดเร็วตั้งแต่เริ่มต้นในการสร้างเว็บไซต์
ข้อเสียของการออกแบบเว็บฟลูอิดนอกจาก จุดบวกการออกแบบเว็บไซต์ดังกล่าวก็มีข้อเสียบางประการเช่นกัน หนึ่งในนั้นคือ ในความเป็นจริง ผลลัพธ์สุดท้ายของหน้า "การปรับอัตโนมัติ" ตามเงื่อนไขความละเอียดหน้าจอบางอย่างนั้นไม่สามารถคาดเดาได้ บาง องค์ประกอบกราฟิกบนเว็บไซต์อาจพบว่าตัวเองอยู่ในสถานที่อื่นโดยฉับพลันเนื่องจากเพื่อนร่วมงานที่อยู่ใกล้เคียงถูกแทนที่
ข้อเสียอีกประการหนึ่งของ "ยาง" ดังกล่าวก็คือการโหลดหน้าเว็บด้วยสามารถเพิ่มขึ้นได้ 2-3 เท่าเมื่อเทียบกับระยะเวลามาตรฐาน สิ่งนี้เกิดขึ้นเนื่องจากเบราว์เซอร์บางตัวพิถีพิถันเกี่ยวกับเค้าโครงหน้า ของรูปแบบนี้- พวกเขาประสบปัญหาในการแสดงองค์ประกอบที่มีความกว้างผันแปร ซึ่งเพิ่มความเสี่ยงต่อข้อผิดพลาดทางการมองเห็นด้วย
ตัวอย่างการออกแบบเว็บไซต์ที่ลื่นไหลและตอบสนองเพื่อความชัดเจน ฉันอยากจะแสดงให้คุณเห็นบางส่วน ตัวอย่างที่ประสบความสำเร็จยางและการออกแบบที่ปรับเปลี่ยนได้เพียงพอ นักพัฒนาที่ประสบความสำเร็จ.
1. http://www.simplebits.com/ก่อนอื่นเรามาดูที่ไซต์ยางของบล็อกเกอร์ชาวอเมริกันที่มีส่วนร่วมในการพัฒนาเว็บไปพร้อม ๆ กัน เวอร์ชันเต็มของเว็บไซต์:
รุ่นมือถือเว็บไซต์:
อย่างที่คุณเห็น ในกรณีนี้ รูปภาพจะถูกปรับให้เข้ากับขนาดของอุปกรณ์เท่านั้น และ โครงสร้างทั่วไปเว็บไซต์ยังคงไม่เปลี่ยนแปลง
2. http://www.fork-cms.com/ตอนนี้ฉันขอแนะนำให้คุณทำความคุ้นเคยกับเว็บไซต์ที่ปรับเปลี่ยนได้ อุปกรณ์เฉพาะและสร้างโครงสร้างของตัวเองขึ้นมาใหม่ทั้งหมด ขึ้นอยู่กับขนาดของมัน เวอร์ชันเต็มของเว็บไซต์:
เว็บไซต์เวอร์ชันมือถือ:
แค่นั้นแหละ. ฉันหวังว่าเนื้อหาในวันนี้จะน่าสนใจและคุณคงไม่เสียเวลา หากเป็นเช่นนั้น ให้แสดงความคิดเห็นเกี่ยวกับเรื่องนี้และแบ่งปันความคิดเห็นของคุณเอง ฉันขอขอบคุณทั้งผลตอบรับเชิงบวกและความคิดเห็นของผู้เชี่ยวชาญจากผู้เชี่ยวชาญด้านการออกแบบเว็บไซต์ 2.0 สมัครสมาชิกบล็อกเพื่อไม่ให้พลาดสิ่งที่น่าสนใจและ ข้อมูลที่เป็นประโยชน์.
นั่นคือทั้งหมดสำหรับฉัน เจอกันเร็ว ๆ นี้!
แนวโน้มและแนวทางสมัยใหม่ในการพัฒนาเว็บไซต์
เรียนรู้อัลกอริทึมสำหรับการเติบโตอย่างรวดเร็วตั้งแต่เริ่มต้นในการสร้างเว็บไซต์
วลาด เมอร์เซวิช
เค้าโครงแบบไหลสามคอลัมน์อาจเป็นเค้าโครงที่ยืดหยุ่นและปรับแต่งได้มากที่สุด การรวมกันของเปอร์เซ็นต์และพิกเซลเพื่อระบุความกว้างของคอลัมน์ทำให้คุณสามารถสร้างเค้าโครงที่แตกต่างกัน โดยเลือกให้เหมาะกับความต้องการของคุณ ในรูป 5.17 แสดงตัวเลือกสำหรับเค้าโครงสามคอลัมน์ เพื่อความสะดวก จะมีการกำหนดหมายเลขไว้
ข้าว. 5.17. เค้าโครงสามคอลัมน์
ในที่นี้สัญลักษณ์เปอร์เซ็นต์ (%) หมายความว่าความกว้างของคอลัมน์ระบุเป็นเปอร์เซ็นต์ของความกว้างของโครงร่าง px - ความกว้างของคอลัมน์ระบุเป็นพิกเซล และเครื่องหมายอนันต์ (∞) ที่คอลัมน์ใช้พื้นที่ที่เหลือ แม้จะมีเลย์เอาต์ที่แตกต่างกันมากมาย แต่หลักการของการก่อสร้างยังคงเหมือนเดิมและมีสองวิธีหลัก: การวางตำแหน่งและองค์ประกอบลอย คุณยังสามารถใช้ตารางเพื่อสร้างคอลัมน์ที่มีความสูงเท่ากันได้
การใช้การวางตำแหน่งเพื่อควบคุมตำแหน่งของชั้นสัมพันธ์กับ องค์ประกอบหลักจำเป็นสำหรับผู้ปกครองในการตั้งค่า ทรัพย์สินตำแหน่งด้วยค่าสัมพัทธ์ และ องค์ประกอบลูกซึ่งประกอบเป็นคอลัมน์ ค่าจะเป็นค่าสัมบูรณ์ โครงสร้างโค้ดสำหรับสี่โครงร่างแรกจะเหมือนกันและแสดงไว้ในตัวอย่างที่ 5.13
ตัวอย่างที่ 5.13 สองคอลัมน์เป็นพิกเซลหรือสามเป็นเปอร์เซ็นต์
สามคอลัมน์ ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
ที่นี่คอลัมน์จะมีหมายเลขตามลำดับเช่น คอลัมน์ 1 อยู่ทางซ้าย คอลัมน์ 2 อยู่ตรงกลาง และคอลัมน์ 3 อยู่ทางด้านขวา
การจัดตำแหน่งมีข้อเสียบางประการที่จำกัดการใช้วิธีนี้ - เมื่อเพิ่มส่วนท้าย จะถูกซ่อนไว้ใต้คอลัมน์ เนื่องจากเลเยอร์เลย์เอาต์ไม่มีความสูงดังกล่าว ดังนั้นจึงไม่ได้ดันเลเยอร์ส่วนท้ายลง หากจำเป็นต้องมีส่วนท้ายในหน้าจริงๆ คุณควรใช้วิธีการสร้างคอลัมน์ตามองค์ประกอบแบบลอย วิธีนี้ยังใช้ไม่ได้กับ IE6 เนื่องจากมีข้อบกพร่อง
สำหรับเค้าโครงหมายเลข 1 ซึ่งความกว้างของคอลัมน์แรกเป็นยางและส่วนที่เหลือได้รับการแก้ไขรูปแบบจะเป็นดังนี้ (ตัวอย่าง 5.14)
ตัวอย่างที่ 5.14 เค้าโครงหมายเลข 1
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; /* ตำแหน่งสัมพัทธ์ */ ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; /* ตำแหน่งสัมบูรณ์ */ ) .col1 ( พื้นหลัง: #C7E3E4; /* สีพื้นหลัง * / ซ้าย: 0; /* ตำแหน่งขอบซ้าย */ ขวา: 300px; /* ตำแหน่งขอบขวา */ .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 200px; /* ความกว้างของคอลัมน์ */ ขวา: 100px; /* เลื่อนไปทางซ้าย ความกว้างของคอลัมน์ 3 */ ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 100px; ขวา: 0; )
คอลัมน์ที่มีความกว้างที่กำหนดจะมีคุณสมบัติความกว้าง และตำแหน่งทางซ้ายหรือขวาจะถูกระบุโดยคุณสมบัติด้านซ้ายหรือขวา ตามลำดับ ความกว้างของยางของคอลัมน์ที่เหลือถูกสร้างขึ้นโดยการเพิ่มซ้ายและขวาพร้อมกัน ซึ่งค่าจะเหมือนกับความกว้างของคอลัมน์คงที่
เค้าโครงหมายเลข 2 (ตัวอย่าง 5.15) และหมายเลข 3 (ตัวอย่าง 5.16) ถูกสร้างขึ้นบนหลักการเดียวกัน
ตัวอย่างที่ 5.15 เค้าโครงหมายเลข 2
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 100px; ) .col2 ( พื้นหลัง: #E0D2C7; ซ้าย: 100px; ขวา: 200px;).col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; ขวา: 0; )
ตัวอย่างที่ 5.16 เค้าโครงหมายเลข 3
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 100px; ) .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 200px; ซ้าย: 100px; .col3 ( พื้นหลัง: #ECD5DE; ซ้าย: 300px; ขวา: 0; )
เค้าโครงหมายเลข 4 ซึ่งตั้งค่าความกว้างของคอลัมน์ทั้งหมดเป็นเปอร์เซ็นต์มีความแตกต่างบางประการ หากต้องการความกว้างเท่ากันของทุกคอลัมน์ สามารถตั้งค่าเป็นเศษส่วนได้ (33.33%) แต่ เบราว์เซอร์โอเปร่าไม่สามารถทำงานกับค่าเปอร์เซ็นต์ที่เป็นเศษส่วนได้ ดังนั้น "รู" จะปรากฏขึ้นระหว่างคอลัมน์ (รูปที่ 5.18)
ข้าว. 5.18. ความกว้างของคอลัมน์ที่ระบุเป็นเปอร์เซ็นต์เศษส่วน
ในสถานการณ์เช่นนี้ คุณควรสลับไปใช้หุ้นที่ไม่เท่ากัน เช่น 33%, 34%, 33% ดังตัวอย่างที่ 5.17
ตัวอย่างที่ 5.17 เค้าโครงหมายเลข 4
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 33%; ) .col2 ( พื้นหลัง: #E0D2C7; ซ้าย: 33 %; ความกว้าง: 34%; ) .col3 ( พื้นหลัง: #ECD5DE; ขวา: 0; ความกว้าง: 33%; )
ในบางเบราว์เซอร์ อาจมีช่องว่างเล็กๆ ปรากฏขึ้นระหว่างคอลัมน์ สามารถแก้ไขได้โดยใช้เศษส่วนแทนค่าเปอร์เซ็นต์ทั้งหมด เช่น 33.3% แทนที่จะเป็น 33%
เค้าโครงที่เหลือซึ่งสองในสามคอลัมน์เป็นยางเป็นตัวแทน กลุ่มพิเศษเพราะสามารถตีความได้หลายวิธี ดังนั้น ความกว้างของคอลัมน์หนึ่งจะแสดงเป็นพิกเซล ส่วนอีกคอลัมน์หนึ่งระบุเป็นเปอร์เซ็นต์ของความกว้างของโครงร่าง และความกว้างของคอลัมน์ที่เหลือจะถูกคำนวณโดยอัตโนมัติ ในรูป รูปที่ 5.19 แสดงวิธีการต่างๆ ในการคำนวณความกว้างของคอลัมน์โดยใช้ตัวอย่างโครงร่างหมายเลข 5
ข้าว. 5.19. ความกว้างของเสายางสองอัน
ในตัวเลือกแรก ความกว้างของคอลัมน์แรกจะถูกตั้งค่าเป็นเปอร์เซ็นต์ของความกว้างของโครงร่าง ความกว้างของคอลัมน์ที่สองจะถูกคำนวณโดยอัตโนมัติ และคอลัมน์ที่สามจะมีความกว้างคงที่ในหน่วยพิกเซล ในตัวเลือกที่สอง คอลัมน์จะเปลี่ยนแปลงกัน และความกว้างของคอลัมน์แรกจะถูกคำนวณโดยอัตโนมัติ ตัวเลือกที่สามถือว่าความกว้างรวมของคอลัมน์ยางเป็น 100% และคำนวณความกว้างของคอลัมน์แรกและที่สอง
ตัวเลือกแรกและตัวที่สองสามารถนำไปใช้ได้อย่างง่ายดายเหมือนกับโค้ดที่มีสองคอลัมน์เป็นพิกเซล แทนที่จะระบุความกว้างเป็น px เราระบุ % ตัวอย่าง 5.18 แสดงรูปแบบเค้าโครงหมายเลข 5 โดยคอลัมน์แรกตั้งค่าเป็นเปอร์เซ็นต์
ตัวอย่างที่ 5.18 เค้าโครงหมายเลข 5 คำนวณความกว้างของคอลัมน์ที่สอง
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 50%; ) .col2 ( พื้นหลัง: #E0D2C7; ซ้าย: 50 %; ขวา: 200px; .col3 ( พื้นหลัง: #ECD5DE; ขวา: 0; ความกว้าง: 200px; )
รูปแบบเค้าโครง #5 พร้อมคอลัมน์แรกที่คำนวณได้จะแสดงอยู่ในตัวอย่างที่ 5.19
ตัวอย่างที่ 5.19 เค้าโครงหมายเลข 5 คำนวณความกว้างของคอลัมน์แรก
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ซ้าย: 0; ขวา: 200px; ระยะขอบขวา: 50%; ) col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 50%; ขวา: 200px; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; ขวา: 0; )
คอลัมน์แรกไม่สามารถตั้งค่าไปทางขวาผ่านคุณสมบัติที่ถูกต้อง เนื่องจากค่าจะเป็น 50%+200px; CSS2 ไม่มีค่าที่คำนวณได้ ดังนั้นเราจะใช้โฟกัส - เราจะจำกัดเลเยอร์แรกทางด้านขวาให้มีความกว้าง 200px ผ่านขวา และย้ายไปทางซ้ายตามความกว้างของคอลัมน์ที่สอง 50% โดยใช้ margin-right เลเยอร์ของเราอยู่ในตำแหน่งที่แน่นอน ดังนั้นการปรับเปลี่ยนดังกล่าวจะไม่ส่งผลกระทบต่อความกว้าง แต่อย่างใด
ตัวเลือกที่สามที่มีคอลัมน์ยางสองคอลัมน์ต้องมีชั้นเพิ่มเติมเรียกว่ายางซึ่งสัมพันธ์กับความกว้างของคอลัมน์ที่จะตั้งค่า (ตัวอย่าง 5.20)
ตัวอย่างที่ 5.20 เค้าโครง #5: เปอร์เซ็นต์ความกว้างของสองคอลัมน์
สามคอลัมน์ .header ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: สัมพันธ์; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .rubber ( ซ้าย: 0; ขวา: 200px; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 60%; ) .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 40%; ซ้าย: 60%; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; ขวา: 0; ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3
การสร้างเลย์เอาต์หมายเลข 6 นั้นคล้ายกับเลย์เอาต์หมายเลข 5 ดังนั้นเราจะไม่ยึดติดกับมัน สำหรับเลย์เอาต์หมายเลข 7 มีตัวเลือกที่อาจทำให้เกิดปัญหาได้ สิ่งนี้ใช้กับกรณีที่คุณต้องการคำนวณความกว้างของคอลัมน์ซ้ายและขวาให้เท่ากัน ในการทำเช่นนี้ควรทำความกว้างของคอลัมน์แรกและคอลัมน์ที่สามเท่ากับ 50% (รูปที่ 5.20)
ข้าว. 5.20. เค้าโครงหมายเลข 7 พร้อมคอลัมน์ที่มีความกว้างเท่ากัน
หากต้องการเว้นที่ว่างสำหรับคอลัมน์ที่สอง เราจะใช้คุณสมบัติ Margin-right สำหรับคอลัมน์แรกและ Margin-left สำหรับคอลัมน์ที่สาม ค่าของคุณสมบัติเหล่านี้จะเท่ากับครึ่งหนึ่งของความกว้างของคอลัมน์ที่สอง ดังนั้น หากเท่ากับ 200px ผลลัพธ์จะเป็น margin-right : 100px (ตัวอย่าง 5.21)
ตัวอย่างที่ 5.21 เค้าโครงหมายเลข 7 ความกว้างของเสายางเท่ากัน
ส่วนหัว ( พื้นหลัง: #D5BAE4; ) .layout ( ตำแหน่ง: ญาติ; ) .layout DIV ( ตำแหน่ง: สัมบูรณ์; ) .col1 ( พื้นหลัง: #C7E3E4; ซ้าย: 0; ขวา: 50%; ระยะขอบขวา: 100px; ) col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 200px; ซ้าย: 50%; ขอบซ้าย: -100px; ) .col3 ( พื้นหลัง: #ECD5DE; ซ้าย: 50%; ขวา: 0; ขอบซ้าย: 100px; )
ไม่สามารถใช้คุณสมบัติ width ได้โดยตรง เนื่องจากการเพิ่มระยะขอบจะเพิ่มความกว้างเท่านั้นและไม่ลดลงตามที่เราต้องการ ดังนั้นความกว้างจึงเกิดขึ้นพร้อมกันตามคุณสมบัติด้านซ้ายและขวาที่ระบุ ด้วยการวางตำแหน่งของคอลัมน์ที่สอง การระบุค่าทางซ้ายหรือขวาจึงเป็นเรื่องยาก เนื่องจากค่าจะเท่ากับ 50%-200px ดังนั้นเราจึงตั้งค่าตำแหน่งระยะขอบด้านซ้ายเป็น 50% ( left : 50% ) จากนั้นย้ายทั้งคอลัมน์ไปทางซ้ายครึ่งหนึ่งของความกว้างโดยใช้คุณสมบัติ margin-left (margin-left : -100px )
เนื่องจากความกว้างของบางคอลัมน์ได้รับการคำนวณโดยอัตโนมัติ ขอแนะนำให้จำกัดความกว้างของโครงร่างขั้นต่ำด้วยการเพิ่มคุณสมบัติความกว้างขั้นต่ำให้กับตัวเลือก BODY จากนั้นความกว้างของคอลัมน์จะไม่ลดลงเมื่อถึงขีดจำกัดที่ระบุ
BODY ( ความกว้างขั้นต่ำ: 800px; /* ความกว้างเค้าโครงขั้นต่ำ */ )
ค่าความกว้างขั้นต่ำขึ้นอยู่กับเค้าโครงและเนื้อหาของเพจ และโดยปกติจะพิจารณาจากประสบการณ์
การใช้องค์ประกอบลอยตัวองค์ประกอบแบบลอยเป็นอีกวิธีหนึ่งในการสร้างเค้าโครงสามคอลัมน์ที่หลากหลาย ต่างจากการวางตำแหน่งตรงที่ช่วยให้คุณไม่ต้องกังวลกับปัญหาของชั้นใต้ดิน เนื่องจากชั้นใต้ดินจะอยู่ใต้เสาที่สูงที่สุดเสมอ
คอลัมน์ถูกสร้างขึ้นโดยใช้คุณสมบัติ float ร่วมกับคุณสมบัติระยะขอบและความกว้าง ขึ้นอยู่กับเค้าโครงที่เลือก ลำดับของคอลัมน์ในโค้ดก็เปลี่ยนแปลงเช่นกัน โดยเลเยอร์จะมาก่อนเสมอซึ่งมีการเพิ่มโฟลต
เค้าโครงหมายเลข 1 ยางคอลัมน์แรก
ความกว้างของคอลัมน์ที่สองและสามระบุเป็นพิกเซล และระบุตำแหน่งผ่านคุณสมบัติ float ด้วยค่า right สำหรับคอลัมน์แรก คุณยังต้องตั้งค่าคุณสมบัติระยะขอบด้านขวาด้วยค่าเท่ากับความกว้างรวมของคอลัมน์ที่เหลือ (ตัวอย่าง 5.22)
ตัวอย่างที่ 5.22 เค้าโครงหมายเลข 1
เค้าโครง 1 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนอยู่; /* แกะ */ ) .col1 ( พื้นหลัง: #C7E3E4; /* สีพื้นหลัง */ ขอบขวา: 300px; /* Shift เหลือความกว้างของคอลัมน์ 2 และ 3 */ .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 200px; float: right; /* ตัดซ้าย */ ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 100px; float: right; /* ตัดซ้าย */ ) ส่วนหัวของไซต์ คอลัมน์ 3 คอลัมน์ 2 คอลัมน์ 1 ส่วนท้าย
เค้าโครงหมายเลข 2 ยางเสากลาง
ความกว้างของคอลัมน์แรกและคอลัมน์ที่สามระบุเป็นพิกเซล และตำแหน่งระบุผ่านคุณสมบัติ float โดยมีค่าซ้ายสำหรับคอลัมน์แรกและทางขวาสำหรับคอลัมน์ที่สาม คอลัมน์กลางเพื่อรักษาลักษณะที่ปรากฏ มีระยะขอบคุณสมบัติสากล ซึ่งระบุระยะขอบซ้ายและขวา (ตัวอย่าง 5.23)
ตัวอย่างที่ 5.23 เค้าโครงหมายเลข 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 2 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนไว้; ) .col1 ( พื้นหลัง: #C7E3E4; float: left; ความกว้าง: 200px; ) .col2 ( พื้นหลัง: #E0D2C7; ระยะขอบ: 0 100px 0 200px; /* ช่องว่างด้านขวาและด้านซ้าย */ .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 100px; float: right; ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 3 คอลัมน์ 2 ส่วนท้าย
เค้าโครงหมายเลข 3 ยางคอลัมน์ที่สาม
ตำแหน่งของคอลัมน์แรกและคอลัมน์ที่สองจะแสดงผ่านคุณสมบัติ float โดยมีค่า left สำหรับคอลัมน์ที่สาม คุณจะต้องตั้งค่าระยะขอบด้านซ้าย (margin-left ) เป็นความกว้างรวมของคอลัมน์ที่เหลือ (ตัวอย่าง 5.24)
ตัวอย่างที่ 5.24 เค้าโครงหมายเลข 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 3 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนอยู่; ) .col1 ( พื้นหลัง: #C7E3E4; float: left; ความกว้าง: 100px; ) .col2 ( พื้นหลัง: #E0D2C7; float: ซ้าย ; width: 200px; ) .col3 ( พื้นหลัง: #ECD5DE; margin-left: 300px; /* ระยะขอบด้านซ้ายถึงความกว้างของคอลัมน์ 1 และ 2 */ ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3 ส่วนท้าย
เค้าโครงหมายเลข 4 ความกว้างของคอลัมน์ทั้งหมดถูกกำหนดเป็นเปอร์เซ็นต์
ในการสร้างเลย์เอาต์นี้ มีตัวเลือกมากมายที่เหมาะสม โดยอิงจากเลย์เอาต์ก่อนหน้า แต่คุณควรระบุเปอร์เซ็นต์แทนพิกเซล อีกวิธีหนึ่งแสดงไว้ในตัวอย่างที่ 5.25 ซึ่งใช้เฉพาะคุณสมบัติ float และ width เท่านั้น
ตัวอย่างที่ 5.25 เค้าโครงหมายเลข 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 4 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนไว้; ) .layout DIV ( float: left; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 20%; ) .col2 ( พื้นหลัง: #E0D2C7; width: 60%; ) .col3 ( พื้นหลัง: #ECD5DE; width: 20%; ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 2 คอลัมน์ 3 ส่วนท้าย
เค้าโครงหมายเลข 5 ความกว้างของเสายางสองต้นในรูป 5.19 แสดงให้เห็นว่าผังหมายเลข 5 ซึ่งมีเสายาง 2 ต้น สามารถตีความได้หลายวิธี
ในที่นี้ ความกว้างของคอลัมน์แรกระบุเป็นเปอร์เซ็นต์ และตำแหน่งระบุผ่านคุณสมบัติ float โดยมีค่า left สำหรับคอลัมน์ที่สาม ความกว้างระบุเป็นพิกเซล และค่าของคุณสมบัติ float ถูกกำหนดไปทางขวา . สำหรับคอลัมน์กลาง สิ่งที่เหลืออยู่คือตั้งค่าระยะขอบซ้ายและขวาให้เป็นความกว้างของคอลัมน์ (ตัวอย่าง 5.26)
ตัวอย่างที่ 5.26 เค้าโครง 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 5.1 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนไว้; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 40%; float: left; ) .col2 ( พื้นหลัง: #E0D2C7; ระยะขอบ: 0 200px 0 40%; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; float: right; ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 3 คอลัมน์ 2 ส่วนท้าย
คำนวณความกว้างของคอลัมน์แรก
นี่เป็นเลย์เอาต์ที่ยากที่สุดเนื่องจากไม่ได้ระบุความกว้างของคอลัมน์แรกโดยตรง แต่หากต้องการจำกัดเนื้อหา คุณต้องระบุค่าที่รวมเปอร์เซ็นต์และพิกเซลสำหรับคุณสมบัติระยะขอบขวา ตามที่ได้กล่าวไปแล้วใน CSS2 สิ่งนี้ไม่สามารถตั้งค่าได้ ดังนั้นเรามาเพิ่มเลเยอร์อื่นภายในเลเยอร์ col1 ที่เรียกว่า wrap และเพิ่มการเยื้องลงในแต่ละเลเยอร์เหล่านี้ หนึ่งในเปอร์เซ็นต์ และอีกส่วนหนึ่งเป็นพิกเซล (ตัวอย่าง 5.27)
ตัวอย่างที่ 5.27 เค้าโครง 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 5.2 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนไว้; ) .col1 ( ขอบขวา: 40%; ) .col1 .wrap ( ขอบขวา: 200px; พื้นหลัง: #C7E3E4; ) .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 40%; float: right; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; float: right; ) ส่วนหัวของไซต์ คอลัมน์ 3 คอลัมน์ 2 คอลัมน์ 1 ส่วนท้าย
ความกว้างของสองคอลัมน์เป็นเปอร์เซ็นต์
ในเค้าโครงนี้ ความกว้างรวมของเสายางจะถือเป็น 100% ดังนั้นเราจะต้องมีชั้นเพิ่มเติมที่จะวัดความกว้างของคอลัมน์ภายใน เลเยอร์นี้ชื่อrubber ทำงานร่วมกับเลเยอร์ col3 ในรูปแบบสองคอลัมน์ และเลเยอร์ด้านใน col1 และ col2 ถูกจัดแนวในแนวนอนโดยใช้คุณสมบัติ float (ตัวอย่าง 5.28)
ตัวอย่างที่ 5.28 เค้าโครง 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 5.3 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนอยู่; ) .rubber ( ขอบขวา: 200px; ) .col1 ( พื้นหลัง: #C7E3E4; ความกว้าง: 60%; ลอย: ซ้าย; ) .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 40%; float: left; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 200px; float: right; ) ส่วนหัวของไซต์ คอลัมน์ 3 คอลัมน์ 2 คอลัมน์ 1 ส่วนท้าย
เลย์เอาต์ 6, 7 และรูปแบบต่างๆ สร้างขึ้นบนหลักการเดียวกันกับเลย์เอาต์หมายเลข 5 ยกเว้นเลย์เอาต์หมายเลข 7 ซึ่งความกว้างของคอลัมน์ซ้ายและขวาเป็นยางและเท่ากัน
ขั้นแรก เราเตรียมฐานและระบุลำดับของเลเยอร์ในโค้ด HTML
คอลัมน์ 1 คอลัมน์ 3 คอลัมน์ 2
Col1 ( ความกว้าง: 50%; float: ซ้าย; ) .col2 ( ความกว้าง: 200px; float: left; ) .col3 ( ความกว้าง: 50%; float: ขวา; )
นั่นไม่ใช่ทั้งหมด เลเยอร์ต่างๆ ยังไม่ได้สร้างคอลัมน์ใดๆ และสร้างในลักษณะที่ไม่เหมาะสมสำหรับเราโดยสิ้นเชิง คุณต้องย้ายคอลัมน์ที่สองไปทางซ้ายครึ่งหนึ่งของความกว้าง (ระยะขอบซ้าย : -100px ) และบังคับคอลัมน์ที่สามให้เข้าที่ ในการดำเนินการนี้ คุณจะต้องเพิ่มความกว้างเพื่อให้เท่ากับหรือมากกว่า 50%+100px (ครึ่งหนึ่งของคอลัมน์ที่สอง) วิธีที่ดีที่สุดคือใช้คุณสมบัติ Margin-left ที่มีค่าลบ หลังจากนั้นคอลัมน์จะถูกสร้างขึ้น มีความแตกต่างอื่น ๆ คอลัมน์ด้านนอกเชื่อมต่อกันซึ่งมองเห็นได้ชัดเจนเมื่อความสูงเกินความสูงของคอลัมน์กลาง (รูปที่ 5.21)
ข้าว. 5.21. ลำโพงที่เชื่อมต่ออยู่
นอกจากนี้ในคอลัมน์ด้านซ้ายข้อความจะอยู่ทางด้านขวาและใน คอลัมน์ด้านขวาข้อความทางด้านซ้ายจะซ่อนอยู่ใต้พื้นหลังของคอลัมน์กลาง สิ่งนี้จะไม่สังเกตเห็นได้หากความสูงของคอลัมน์นี้มีขนาดใหญ่ แต่ก็ไม่สามารถทำได้เสมอไป เพื่อเอาชนะข้อบกพร่องเหล่านี้ คุณจะต้องเพิ่มอีกหนึ่งเลเยอร์ในคอลัมน์ด้านนอก (ในตัวอย่างเรียกว่า wrap ) และตั้งค่าสีพื้นหลังของคอลัมน์สำหรับพวกมัน ช่องที่ต้องเติมและเยื้อง รหัสสุดท้ายให้ไว้ในตัวอย่างที่ 5.29
ตัวอย่างที่ 5.29 เค้าโครงหมายเลข 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 7 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ล้น: ซ่อนไว้; ) .col1 ( ความกว้าง: 50%; float: left; ) .col1 .wrap ( พื้นหลัง: #C7E3E4; ขอบขวา: 100px ; /* เลื่อนไปทางซ้ายครึ่งหนึ่งของความกว้างของคอลัมน์ 2 */ padding: 10px; /* Margins รอบข้อความ */ ) .col2 ( พื้นหลัง: #E0D2C7; width: 200px; float: left; margin-left: -100px; ) .col3 ( ความกว้าง: 50%; float: right; margin-left: -100px; ) .col3 .wrap ( พื้นหลัง: #ECD5DE; margin-left: 100px; /* เลื่อนไปทางขวาครึ่งหนึ่งของความกว้างของคอลัมน์ 2 */ padding : 10px; ) ส่วนหัวของไซต์ คอลัมน์ 1 คอลัมน์ 3 คอลัมน์ 2 ส่วนท้าย
ขอบและเส้นขอบในรูปแบบสามคอลัมน์ไม่ได้ตั้งใจเพิ่มคุณสมบัติการเติมลงในโครงร่างตัวอย่างที่ให้ไว้ เนื่องจากโค้ดทำหน้าที่เป็นพื้นฐานของโครงร่างเท่านั้น และคุณต้องตัดสินใจในบางกรณีว่าคุณต้องการระยะขอบในคอลัมน์หรือไม่ การเพิ่มระยะขอบและเส้นขอบให้กับองค์ประกอบบล็อกจะเพิ่มความกว้าง ซึ่งจะต้องนำมาพิจารณาระหว่างการจัดวาง อย่างไรก็ตาม ความกว้างจะเพิ่มขึ้นหากตั้งค่าเลเยอร์ไว้เท่านั้น ค่าความกว้าง- ลองดูตัวอย่างบางส่วนที่ความกว้างจะเปลี่ยนไปและที่ที่จะไม่เปลี่ยนแปลง
div ( /* padding ส่งผลต่อความกว้าง */ width: 200px; padding: 10px; ) div ( /* padding ไม่ส่งผลต่อความกว้าง */ ตำแหน่ง: Absolute; left: 20px; right: 20px; padding: 10px; ) div ( / * padding ส่งผลต่อความกว้าง */ float: left; padding: 10px; ) div ( /* padding ไม่ส่งผลต่อความกว้าง */ margin-right: 50%; padding: 10px; )
ในคอลัมน์ที่จำเป็นต้องมีช่องว่างภายในหรือเส้นขอบ แต่การเพิ่มจะทำให้เค้าโครง "พัง" คุณสามารถใช้เลเยอร์ที่ซ้อนกันและตั้งค่าคุณสมบัติที่จำเป็นได้
คอลัมน์
ในตัวอย่างนี้ ความกว้างของเลเยอร์ที่ตั้งค่าเป็น 200 พิกเซลจะไม่เปลี่ยนแปลง แต่จะเพิ่มระยะขอบและเส้นขอบเข้าไป
ตารางเป็นคอลัมน์โต๊ะมีความสะดวกในการใช้งานที่เรียบง่ายและ การสร้างอย่างรวดเร็วคอลัมน์ที่มีความสูงเท่ากัน ความเร็วนี้ได้มาจากหลายสิ่งหลายอย่าง ประการแรก โครงสร้างโค้ดสำหรับเลย์เอาต์ใดๆ ยังคงเหมือนเดิม คอลัมน์ในโค้ดจะไม่เปลี่ยนลำดับ เช่น ในกรณีของโฟลต ประการที่สอง ความกว้างของเซลล์จะถูกคำนวณโดยอัตโนมัติตามเนื้อหา ดังนั้นเพียงระบุความกว้าง ลำโพงที่จำเป็นและส่วนที่เหลือจะปรับให้เข้ากับความกว้างโดยรวมของตาราง ตัวอย่างที่ 5.30 แสดงโครงร่างหมายเลข 1 ที่สร้างบนโต๊ะ
ตัวอย่าง 5.30. เค้าโครงหมายเลข 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
เค้าโครง 1 .header, .footer ( พื้นหลัง: #D5BAE4; ) .layout ( ความกว้าง: 100%; /* ความกว้างของตาราง */ ) .layout TD ( ช่องว่างภายใน: 5px; /* ระยะขอบของเซลล์ */ จัดแนวตั้ง: ด้านบน; / * การจัดตำแหน่งด้านบน */ .col1 ( พื้นหลัง: #C7E3E4; ) .col2 ( พื้นหลัง: #E0D2C7; ความกว้าง: 200px; ) .col3 ( พื้นหลัง: #ECD5DE; ความกว้าง: 100px; ) ส่วนหัวของไซต์
| คอลัมน์ 1 | คอลัมน์ 2 | คอลัมน์ 3 |
ส่วนที่เพิ่มเข้าไป คุณสมบัติช่องว่างภายในไปที่ตัวเลือก TD จะแทนที่แอตทริบิวต์ cellpadding ของแท็ก
 |
เขายืนอยู่ใต้ต้นไม้และรอ หนึ่ง-สอง หนึ่ง-สอง! หญ้ากำลังลุกไหม้ ดาบกำลังตัด กรีดร้อง Lewis Carroll แปลโดย Dina Orlova ภาพวาดโดย John Tenniel |
 |
ผลลัพธ์ของตัวอย่างจะแสดงในรูป 5.22.
ข้าว. 5.22. คอลัมน์ที่อยู่ตรงกลางของเค้าโครง
ฉันยินดีต้อนรับคุณสู่บทเรียนต่อไปซึ่งจะเน้นในวันนี้ ภาษาซีเอสเอส- และเราจะใช้เลย์เอาต์ยางสามคอลัมน์สำหรับไซต์กับคุณ ในอนาคต คุณสามารถคัดลอกเฟรมนี้และเริ่มสร้างเว็บไซต์ได้ เค้าโครงจะประกอบด้วยบล็อกต่างๆ เช่น ส่วนหัวของไซต์ แถบด้านข้างซ้าย แถบด้านข้างขวา พื้นที่เนื้อหา และส่วนท้าย ไม่มีอะไรซับซ้อน เทมเพลตที่เรียบง่ายและค่อนข้างเรียบง่าย ถึงเวลาที่จะดำเนินการแล้ว เริ่มต้นด้วยเรามาเขียนกัน โครงสร้างต่อไปนี้รหัสเอชทีเอ็ม:
เราได้ดำเนินการตามโครงสร้างแล้ว ถึงเวลาที่จะใช้สไตล์ซึ่งเราจะใช้เค้าโครงสามคอลัมน์
ตอนนี้เราเขียนสไตล์เสร็จแล้ว มาดูกันสักหน่อย
โดยพื้นฐานแล้วเราใช้บล็อกที่เราวางบล็อกอื่น ๆ ทั้งหมดและตั้งค่าความกว้างสูงสุดการจัดกึ่งกลางและความกว้างเท่ากับหนึ่งร้อยเปอร์เซ็นต์ (นี่ไม่ได้บังคับ แต่ก็จะไม่ฟุ่มเฟือยเช่นกัน ).
ชื่อเรื่องถูกวางไว้ในบล็อกที่รับผิดชอบส่วนหัวของไซต์ และตัวบล็อกนั้นถูกตั้งค่าให้มีสีพื้นหลังและการจัดตำแหน่งข้อความตรงกลาง หลังจากนั้นเราก็ไปยังส่วนที่สำคัญที่สุด นั่นก็คือ ลำโพงยางของเรา
สำหรับแถบด้านข้างทางซ้าย เราตั้งค่าสีพื้นหลังและความสูงคงที่เพื่อให้เราเห็นภาพว่าไซต์จะมีลักษณะอย่างไรในอนาคต เราตั้งค่าความกว้างเป็นยี่สิบเปอร์เซ็นต์และตั้งค่าการไหลขององค์ประกอบไปทางซ้ายด้วย
สถานการณ์ที่มีแถบด้านข้างขวาจะคล้ายกันเพียงเราส่งเท่านั้น องค์ประกอบนี้วี ด้านขวาหน้าจอกำหนดการไหลขององค์ประกอบทางด้านขวา หลังจากวิธีนี้ เนื้อหาจะจัดกึ่งกลางหน้าจอระหว่างแถบด้านข้างทั้งสองนี้โดยอัตโนมัติ
แต่สำหรับเนื้อหา เรายังกำหนดสีพื้นหลัง ความสูง ขอบซ้ายและขวา ซึ่งเท่ากับ 21 เปอร์เซ็นต์ และตามด้วยความกว้างเป็น 58 เปอร์เซ็นต์ คุณอาจสงสัยว่าทำไมถึงร้อยละ 58 ตามความกว้างเท่ากับหนึ่งร้อยเปอร์เซ็นต์เราจะลบช่องว่างภายในออกจากด้านซ้ายและ ด้านขวาซึ่งเท่ากับร้อยละ 21 รวม 100 - 21 - 21 = 58 นั่นคือที่ รูปนี้- เพียงเท่านี้ บล็อกยางก็พร้อม สิ่งที่เหลืออยู่คือการติดตั้งส่วนท้าย
มันถูกนำไปใช้ตามหลักการของส่วนหัวของไซต์ เรายังสร้างบล็อกที่มีส่วนหัวอยู่ข้างใน ตั้งค่าพื้นหลัง สีข้อความ และการจัดตำแหน่งข้อความตรงกลาง
เมื่อดูผลลัพธ์แล้วเราสามารถพูดได้ว่าทุกอย่างค่อนข้างเรียบง่ายและไซต์จะถูกบีบอัดจนถึงขีด จำกัด และขยายออกไปตามความกว้างสูงสุดที่เราระบุ หากต้องการ คุณสามารถระบุความกว้างขั้นต่ำที่ไซต์ของคุณจะย่อขนาดได้ ระบุ คุณสมบัตินี้สำหรับบล็อกที่มี id คอนเทนเนอร์ เนื่องจากเป็นบล็อกพาเรนต์ของบล็อกอื่นๆ ดังนั้นคุณและฉันได้พิจารณาถึงความเป็นไปได้ในการสร้างเว็บไซต์ยางสามคอลัมน์ด้วยเหตุนี้ฉันจะบอกลาคุณ ขอให้โชคดีกับคุณ ประสบความสำเร็จ!
เค้าโครงเว็บไซต์ยาง ออกแบบเว็บยาง เราจะยืดอะไรและที่ไหน?คุณสมบัติข้อดีและข้อเสีย
รูปแบบเว็บไซต์ประเภทหนึ่งที่ได้รับความนิยมมากที่สุดคือรูปแบบยาง คุณสมบัติหลัก เค้าโครงยางคือความสามารถในการปรับให้เข้ากับความละเอียดหน้าจอและขนาดหน้าต่างเบราว์เซอร์ที่แตกต่างกัน
ของทั้งหมด ประเภท HTMLเค้าโครงเว็บไซต์สามารถแบ่งออกเป็นสามรูปแบบหลัก - แบบคงที่ ลื่นไหล และปรับเปลี่ยนได้
คุณสมบัติของโครงยาง
เลย์เอาต์แบบไหลนั้นแตกต่างจากเลย์เอาต์แบบตายตัวตรงที่สามารถเปลี่ยนขนาดของหน้าต่างเบราว์เซอร์ได้ และได้รับการออกแบบสำหรับความละเอียดหน้าจอที่แตกต่างกัน ความจริงก็คือด้วยความทันสมัย การพัฒนาอย่างรวดเร็วเทคโนโลยีและการเกิดขึ้นอย่างต่อเนื่องของเทคโนโลยีขั้นสูงมากขึ้นเรื่อย ๆ ปัญหาเกิดขึ้นกับการจัดวางเว็บไซต์ รูปแบบคงที่ตามปกติไม่ตอบสนองต่อทุกคนอีกต่อไป ข้อกำหนดที่จำเป็นและค่อยๆล้าสมัยไป ตอนนี้การใช้วิธีเก่าเป็นข้อยกเว้นมากกว่ากฎ และนี่ค่อนข้างเป็นธรรมชาติ
ลองนึกภาพตัวอย่างง่ายๆ เช่น ผู้ใช้คนหนึ่งกำลังโดยสารรถไฟใต้ดิน กลับบ้านจากที่ทำงาน และมาที่ไซต์ของคุณด้วย โทรศัพท์มือถือซึ่งมีความละเอียดหน้าจออยู่ที่ 320x480 พิกเซล จากนั้นเขาก็กลับบ้านด้วย คอมพิวเตอร์ตั้งโต๊ะและดูไซต์ของคุณบนจอภาพแนวทแยงขนาด 24 นิ้วที่มีความละเอียด 1920x1200 พิกเซล (ซึ่งยังห่างไกลจากขีดจำกัด) คำถามคือ เมื่อใช้เค้าโครงคงที่ คุณจะได้ผลลัพธ์เดียวกันบนสมาร์ทโฟนและจอภาพขนาดใหญ่ได้อย่างไร (หากคุณละทิ้งการปรับขนาดอัตโนมัติ) กล่าวคือจำเป็นต้องไม่ปรากฏบนโทรศัพท์ การเลื่อนแนวนอนและในเวลาเดียวกัน บนจอภาพ ไซต์นั้นดูไม่เหมือนแถบแคบๆ ที่โชคร้ายตรงกลางสีขาว หน้าจอว่างเปล่า- คำตอบคือไม่
และนี่คือโครงร่างยางที่ช่วยเราซึ่งรับมือกับงานได้อย่างง่ายดาย บนจอภาพขนาดใหญ่ การขยายไซต์ให้ทั่วทั้งหน้าจอ หรือจำกัดความกว้างของเทมเพลตไว้ เช่น 75% ของความกว้างของหน้าจอ ไม่ใช่เรื่องผิด มีคนที่ยอดเยี่ยมสำหรับงานนี้ คุณสมบัติซีเอสเอส ความกว้างสูงสุดและ ความกว้างขั้นต่ำซึ่งจะช่วยให้คุณสามารถรักษาความกว้างของไซต์ให้อยู่ในขอบเขตที่กำหนดซึ่งเป็นวิธีแก้ปัญหาที่ถูกต้องและสวยงามที่สุด
ข้อดีและข้อเสียของโครงยางข้อได้เปรียบหลักของรูปแบบของเหลวคือความสามารถรอบด้านเมื่อปรับขนาดหน้าต่างเบราว์เซอร์และบนจอภาพที่มีความละเอียดหน้าจอต่างกันซึ่งความแตกต่างอาจแตกต่างกันไปมาก เว็บไซต์ที่ได้รับการออกแบบมาอย่างดีจะดูดีบนจอภาพขนาดใหญ่โดยใช้พื้นที่หน้าจอเพียงพอ แต่ก็ควรจำไว้ว่าบุคคลนั้นไม่ได้รับรู้มากเกินไป เส้นยาวข้อความและคำนวณความกว้างของไซต์อย่างชาญฉลาดและอยู่ภายในขอบเขตที่เหมาะสม ความจริงที่ว่าเว็บไซต์ที่แคบเกินไปจะดูน่าสังเวชบนหน้าจอขนาดใหญ่นั้นไม่มีความลับสำหรับใครเลยและควรหลีกเลี่ยงเสมอ
เลย์เอาต์ยางมีข้อเสียไม่มากนัก ดังนั้นจึงเป็นที่นิยมและแพร่หลาย ข้อเสียเปรียบหลักคือการสร้างเว็บไซต์ที่ยืดหยุ่นได้ยากกว่าเว็บไซต์แบบตายตัว ในกรณีของรูปภาพหรือพื้นหลังขนาดใหญ่ คุณจะต้องมองหาตำแหน่งในรูปภาพที่สามารถยืดออกได้ โดยยังคงรักษาความเพียงพอของรูปภาพไว้ มิติข้อมูลเกือบทั้งหมดในเค้าโครงจะต้องระบุเป็นเปอร์เซ็นต์ซึ่งแน่นอนว่าต้องคำนวณอย่างชาญฉลาด และถ้าภาพต้นฉบับเล็กเกินไปก็ให้ทำการปรับขนาด ด้านใหญ่มันจะสูญเสียคุณภาพไปมาก
ในทางกลับกันถ้าคุณเอามากเกินไป ภาพขนาดใหญ่หากสำรองไว้ก็จะมีน้ำหนักมากเกินไปและผู้ใช้ที่เข้าถึงไซต์จากอุปกรณ์มือถือที่มีอินเทอร์เน็ตไม่ดีจะดาวน์โหลดไบต์พิเศษมากเกินไป
เมื่อวางเว็บไซต์ยางจะใช้เวลามากในการตรวจสอบผลลัพธ์ที่ความละเอียดหน้าจอที่แตกต่างกันและยิ่งไปกว่านั้นต้องใช้จอภาพที่มีเส้นทแยงมุมพอสมควรไม่เช่นนั้นจะตรวจสอบได้อย่างไร แต่ข้อเสียทั้งหมดนี้เทียบไม่ได้กับข้อดีของรูปแบบเว็บไซต์ยาง เลย์เอาต์ HTML เป็นงานศิลปะที่แท้จริง ซึ่งไม่ใช่ว่านักออกแบบเลย์เอาต์ทุกคนจะเข้าใจ ควรใช้เค้าโครงประเภทใดก็ตามตามความเหมาะสม ไม่ใช่แค่ที่ใดก็ได้
เค้าโครง HTML
ตัวอย่าง - ยางหน้า 1
ตัวอย่างของยางที่มีความต้านทานสูงต่อการดัดงอซ้ำๆ ที่มีไดฟีนิลกัวนิดีนสูงเพียงพอ แสดงไว้ในตารางที่ 1 4.15. ในแต่ละโมดูลัสหรือระดับของการเชื่อมโยงข้าม ยาง DPG มีความต้านทานความล้าสูงสุด
การใช้ยางสำหรับแก้มยางเป็นตัวอย่าง แสดงให้เห็นว่าวิธี DSC และ DTG เมื่อทำการย่อยสลายตัวอย่างในสภาพแวดล้อมที่มีไนโตรเจน ให้ ผลลัพธ์ที่ดีที่สุดเมื่อระบุองค์ประกอบของยาง NC, SBR, EPDM และฮาโลบิวทิล
เมื่อสลายตัวในสภาพแวดล้อมที่มีออกซิเจน เส้นโค้งจะไม่เป็นข้อมูล แต่จะสอดคล้องกับเส้นโค้งที่ได้รับในสภาพแวดล้อมที่มีไนโตรเจน
ขอให้เราพิจารณาผลกระทบเหล่านี้โดยใช้ตัวอย่างของยางที่มีพื้นฐานมาจากยางที่ตกผลึก ซึ่งแสดงให้เห็นอย่างชัดเจนที่สุด
ในงานของ K. A. Kerimov (1965) โดยใช้ตัวอย่างของยางและโพลีไวนิลแสดงให้เห็นว่าเส้นโค้งความเค้น - ความเครียดแบบไดนามิกใกล้กับเส้นตรงวางอยู่เหนือเส้นคงที่และในบริเวณที่มีความเค้นใกล้กับศูนย์ความผิดปกติที่ตกค้าง จากโหลดไดนามิกอาจมีค่าคงที่สูงกว่าสามเท่า
อิทธิพลของความชื้นต่อปฏิกิริยาเคมีในระหว่างการแตกร้าวของโอโซนควรปรากฏให้เห็นอย่างเท่าเทียมกันบนยางที่ทำจากยางที่มีโครงสร้างทางเคมีคล้ายกัน แต่ไม่ได้สังเกตสิ่งนี้ ดังที่เห็นได้ในตัวอย่างของยางจาก NK และ SKI
เค้าโครงเว็บไซต์แบบปรับเปลี่ยนได้ บทเรียนที่ 1 เค้าโครงหน้าแรกผลลัพธ์ที่ได้รับโดย P. A. Rebinder และ V. V. Margaritov เกี่ยวกับอิทธิพลของธรรมชาติของพื้นผิวของเมล็ดฟิลเลอร์ที่มีต่อผลการเสริมความแข็งแกร่งมีความสำคัญพื้นฐานอย่างยิ่ง โดยใช้ยางเป็นตัวอย่าง พวกเขาแสดงให้เห็นว่าสารตัวเติมถูกแบ่งออกเป็นสามกลุ่มตามลักษณะโมเลกุลของพื้นผิว
มีข้อกำหนดที่แตกต่างกันสำหรับยาง มาดูตัวอย่างยางที่ใช้ในอุปกรณ์ขุดเจาะและบ่อน้ำมัน
อย่างไรก็ตามลักษณะที่แตกต่างกันของแรงระหว่างโมเลกุลของปฏิสัมพันธ์ระหว่างโพลีเมอร์และตัวทำละลายสามารถนำไปสู่การบวมของโพลีเมอร์ที่แตกต่างกันอย่างสิ้นเชิงที่ค่าพารามิเตอร์ความสามารถในการละลายที่ใกล้เคียงกันสำหรับสื่อเหล่านี้ ปัญหานี้ได้รับการศึกษาอย่างละเอียดที่สุดโดยใช้ตัวอย่างยาง
สิ่งเจือปนและสารตัวเติมสามารถเป็นส่วนสำคัญของน้ำหนักรวม และมักจะเกินน้ำหนักของยางด้วยซ้ำ สิ่งเจือปนที่เติมลงในยางดิบมีความหลากหลายและซับซ้อนเพียงใดสามารถเห็นได้ในตัวอย่างยางสำหรับยางรถยนต์
เพื่อเพิ่มความต้านทานของโพลีเมอร์ต่อสารเคมี สื่อที่ใช้งานอยู่การเชื่อมโยงข้ามจะต้องทนต่อสภาพแวดล้อมเหล่านี้ ความต้านทานสูงสุดที่ใช้อยู่ในปัจจุบันคือการเชื่อมโยงข้าม พิมพ์ ซี-ซีดังแสดงในตัวอย่างของยางฟลูออรีนและยางคลอโรพรีน (ดูบทที่
ลักษณะสำคัญของกระบวนการสึกหรอของยางเลื่อนไปตาม พื้นผิวโลหะกับ ความเร็วสูง, เป็น อุณหภูมิวิกฤติการทำลายล้างด้วยแรงเสียดทาน เมื่อยางเลื่อนไปบนพื้นผิวโลหะภายใต้สภาวะ อุณหภูมิสูงการสัมผัส (200 - 400 C) การทำลายล้างประเภทหลักต่อไปนี้เป็นไปได้: การปรากฏตัวของรอยแตกบนพื้นผิวแรงเสียดทาน, การก่อตัวของชั้นยางที่ห่อหุ้มทั้งบนพื้นผิวสัมผัสของคู่แรงเสียดทานและการเกิดกระบวนการสึกหรอที่รุนแรง โดยใช้ยางที่มีส่วนประกอบของยางไนไตรล์-บิวทาไดอีนและเอทิลีน-โพรพิลีนเป็นตัวอย่าง เราจะวิเคราะห์สาเหตุที่ทำให้วัสดุเหล่านี้ถูกทำลาย
การแนะนำสารตัวเติมจะช่วยเพิ่มผลให้ยางอ่อนตัวลง ข้อสรุปที่ว่าผลอ่อนตัวจะมีมากขึ้นเมื่อมีสารตัวเติมปรากฏชัดเจนและเกี่ยวข้องเฉพาะกับข้อเท็จจริงที่ว่าการเปรียบเทียบยางเกิดขึ้นที่การเปลี่ยนรูปจริงของเฟสยางที่แตกต่างกัน ตัวละครส่วนตัว- ข้อสรุปนี้อิงจากวัสดุจำนวนมากที่รวบรวมระหว่างการศึกษายาง NC อย่างไรก็ตามเพิ่มเติม การวิเคราะห์โดยละเอียดการใช้ตัวอย่างยางจากยางชนิดอื่นแสดงให้เห็นสิ่งที่แตกต่างออกไป
หน้า: 1
บน ช่วงเวลานี้วิธีสร้างเว็บไซต์ด้วยตัวเองไม่ใช่เรื่องเพ้อฝันและไม่ได้เป็นตัวแทนของสิ่งที่ซับซ้อนเหมือนในต้นปี 2000
เพื่อสร้างปาฏิหาริย์ของคุณบนอินเทอร์เน็ตคุณสามารถใช้สำเร็จรูปและได้ เครื่องยนต์ฟรีสำหรับเว็บไซต์และโปรแกรม (ผู้สร้างเว็บไซต์) ด้วยความช่วยเหลือ ซึ่งหากไม่มีความรู้พื้นฐานเกี่ยวกับ html และ css คุณสามารถสร้างเว็บไซต์ตั้งแต่เริ่มต้นในเวลาไม่นานบนพื้นฐานระดับมืออาชีพในแง่ของการเพิ่มประสิทธิภาพและ SEO
หรือคุณสามารถไปทางอื่นซึ่งถูกต้องมากกว่า: ศึกษาซอฟต์แวร์ รหัสเอชทีเอ็มและ จัดแต่งทรงผมองค์ประกอบบน css ในทิศทางนี้คุณจะสามารถสร้างเว็บไซต์ที่มีดีไซน์ใดก็ได้และทำให้มีรูปลักษณ์ที่เป็นเอกลักษณ์
การฝึกอบรม HTML ออนไลน์
ฉันขอแนะนำให้คุณใช้เวลาสักหน่อยและเริ่มต้นด้วยการเรียนรู้พื้นฐานของ html และ css เพราะหากไม่รู้สิ่งเหล่านี้ คุณจะไม่สามารถแก้ไขส่วนย่อยใดๆ ด้วยตนเองได้ตามที่คุณต้องการ โดยแทบไม่ต้องเพิ่มสิ่งใหม่เข้าไปเลย มันภายในเทมเพลต
ห้องปฏิบัติการวิทยาการคอมพิวเตอร์ ข้อสอบและมีสื่อการเรียนรู้มากมายในหัวข้อนี้บนอินเทอร์เน็ต
องค์ประกอบสำหรับไซต์
ในการสร้างเว็บไซต์ คุณจำเป็นต้องรู้วิธีฝัง หน้า html เมนูซีเอสลิงก์ รูปภาพ และวิดีโอ สามารถเพิ่มประสิทธิภาพไซต์ได้อย่างเหมาะสมและตั้งค่าเมตาแท็กได้อย่างถูกต้อง มันจะมีประโยชน์ในการเรียนรู้ว่าจะวางเว็บไซต์บนอินเทอร์เน็ตที่ไหนและอย่างไรและชื่ออะไรสำหรับพอร์ทัลใหม่วิธีสร้างเว็บไซต์ด้วยความช่วยเหลือ โปรแกรมต่างๆและเครื่องมือ
เหตุใดจึงจำเป็น? การออกแบบที่ปรับเปลี่ยนได้- ฉันจะเริ่มต้นด้วยสถิติ คุณสามารถดูข้อมูล TNS สำหรับเดือนมีนาคม 2013 ได้จากสไลด์ด้านล่าง
อย่างที่คุณเห็น ผู้ชมประมาณหนึ่งในสามมาจากสมาร์ทโฟนและแท็บเล็ต และนี่คือเงื่อนไขว่าเปอร์เซ็นต์จะเพิ่มขึ้นทุกเดือนเท่านั้น ตามที่เข้าใจแล้วเอาจมูกบังลมจะดีกว่า!)
เนื่องจาก CSS เพียงอย่างเดียวไม่เพียงพอที่จะแก้ปัญหาอย่างชัดเจน (ไม่เพียงแต่ต้องเปลี่ยนสไตล์เท่านั้น แต่ยังรวมถึงโครงสร้างและเนื้อหาของบล็อกด้วย) เราจะใช้ jQuery บ่อยครั้งที่เว็บไซต์ประกอบด้วยหลายบล็อก: บล็อกหลักและแถบด้านข้าง หากคุณปรับเว็บไซต์ให้ อุปกรณ์เคลื่อนที่แล้วนี่ก็ไม่เกิน 2 บล็อก (ซ้ายและขวา)
ด้านล่างนี้เป็นโค้ดตัวอย่าง รูปแบบที่ปรับเปลี่ยนได้- มันมีพื้นฐานมาก - คุณสามารถเพิ่มส่วนที่เหลือได้ตามดุลยพินิจของคุณ และอย่าลืมเชื่อมต่อ ไลบรารี jQuery- (ดูวิธีรวมไลบรารี jQuery ได้อย่างไร)
รหัส JS (jQuery)
$(เอกสาร).ready(ฟังก์ชั่น() (
var w = $(หน้าต่าง).ความกว้าง(); // ความกว้างของหน้าต่าง
var h = $(หน้าต่าง).ความสูง(); // ความสูงของหน้าต่าง. เราไม่ได้ใช้มัน สำหรับการอ้างอิง
ถ้า (ว
