เมื่อเราออกแบบหน้าเว็บเรามักจะพบกับสิ่งที่ไม่พึงประสงค์ สิ่งที่พบบ่อยที่สุดคือหลังจากการเพิ่มเนื้อหาในพื้นหลังเราพบว่าหน้าที่แสดงนั้นเปิดออกซึ่งทำให้หน้าเว็บไม่น่าดูมาก ในอดีตผู้คนออกแบบตารางโดยทั่วไปดังนั้นจึงมีโซลูชั่นออนไลน์มากมายตามธรรมชาติ ตอนนี้มีการออกแบบมาตรฐาน Div CSS และพวกเขาไม่ค่อยเห็นวิธีการที่ดีที่เกี่ยวข้อง ตอนนี้ Xiaoxiang Online สรุปวิธีการที่ดีที่พบในชีวิตประจำวันเพื่อป้องกันไม่ให้ตารางกระจายออกไปและแบ่งปันกับคุณ
1. ตั้งค่าขนาดภาพโดยตรงบนหน้าเว็บตัวอย่างเช่นรหัส: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg ความกว้าง = 600 ความสูง = 500 border = 0> แม้ว่าสิ่งนี้สามารถ จำกัด ขนาดภาพได้ แต่คุณต้องปรับเปลี่ยนขนาดภาพด้วยตนเองก่อนที่จะอัปโหลดภาพมิฉะนั้นภาพที่อัปโหลดจะเปลี่ยนรูป
2. ใช้รหัสต่อไปนี้: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javascript: ถ้า (this.width> 600} {this.resized = true; this.style.width = 600;
วิธีนี้จะหดตัวโดยอัตโนมัติเป็นความกว้างที่ระบุเมื่อโทรหารูปภาพซึ่งจะไม่ทำให้รูปภาพผิดรูปและจะไม่ทำลายตาราง อย่างไรก็ตามข้อเสียคือถ้าภาพมีขนาดใหญ่เกินไปในระหว่างกระบวนการดาวน์โหลดภาพนั่นคือในระหว่างกระบวนการแสดงภาพมันจะแสดงในขนาดดั้งเดิมของภาพก่อนซึ่งจะทำลายตารางและหน้าจะน่าเกลียด ประการที่สองเมื่อภาพปรากฏขึ้นอย่างเต็มที่รูปภาพจะหดตัวโดยอัตโนมัติ
3. เราสามารถ จำกัด ขนาดของตารางเพื่อป้องกันไม่ให้มันถูกยืดออกตัวอย่างเช่นเพิ่มรหัสใน <width ตาราง = 600 border = 0 cellpadding = 0 cellpacing = 0> style = table-layout: แก้ไข; word-wrap: break-word; break-break; break-all; คือการแก้ไขเค้าโครงของตารางซึ่งสามารถป้องกันไม่ให้ตารางถูกยืดออก Word-wrap: break-word; คือการควบคุมตัวแบ่งสายนั่นคือเพื่อบังคับใช้การแบ่งสาย สิ่งนี้จะต้องใช้เมื่อมีเนื้อหาข้อความจำนวนมาก เนื้อหาที่ซ้ำกันพิเศษจะปรากฏขึ้นและหากการแบ่งบรรทัดไม่ได้ดำเนินการตารางจะถูกยืดออก; และคำพูด: break-all; มันสามารถแก้ปัญหาที่เฟรมเวิร์ก IE กระจายออกเป็นภาษาอังกฤษ (สายข้อความที่ไม่ใช่เอเชีย) แต่มันจะไม่บังคับให้ห่อเส้นและมีเพียงเนื้อหาในความกว้างของตารางเท่านั้น โดยทั่วไปการพูดเพียงแค่ใช้ Style = Table-Layout: แก้ไข; Word-wrap: break-word; แน่นอนว่าข้อความที่เรียกว่าข้างต้นสามารถกำหนดใน CSS ได้เช่น
| โต๊ะ { Table-Layout: แก้ไข; Word-wrap: break-word; - |
4. ใช้ CSS เพื่อควบคุมขนาดการปรับตัวของรูปภาพรหัสมีดังนี้:
| img { ความกว้างสูงสุด: 600px; ความกว้าง: นิพจน์ (this.width> 600? 600px: this.width); ล้น: ซ่อน; - |
ในหมู่พวกเขาความกว้างสูงสุด: 600px; ในเบราว์เซอร์ที่ไม่ใช่อื่น ๆ เช่น IE7 และ Firefox ความกว้างสูงสุดคือ 600px แต่มันไม่ถูกต้องใน IE6; ความกว้าง: 600px; ในเบราว์เซอร์ทั้งหมดขนาดของภาพคือ 600px เมื่อขนาดภาพมากกว่า 600px มันจะลดลงเป็น 600px โดยอัตโนมัติซึ่งใช้ได้ใน IE6 และล้น: ซ่อน; หมายถึงการซ่อนส่วนที่เกินขนาดที่ตั้งไว้เพื่อหลีกเลี่ยงการเสียรูปของตารางเนื่องจากความล้มเหลวในการควบคุมขนาดภาพ 2 หน้ารวมหน้าก่อนหน้า 12 หน้าถัดไป