คุณเคยเห็นโฆษณาของเว็บไซต์ขนาดใหญ่วางตรงกลางเนื้อหาเพื่อตัดข้อความหรือไม่ โดยทั่วไป โฆษณาของเว็บไซต์ขนาดเล็กทั่วไปจะวางได้เฉพาะที่จุดเริ่มต้นหรือจุดสิ้นสุดของเนื้อหาเท่านั้น บางทีระบบ cms ของเว็บไซต์ขนาดใหญ่อาจมีก็ได้ ฟังก์ชันนี้ พื้นฐานของ cms ที่ใช้กันทั่วไปโดยเว็บไซต์ขนาดเล็กของเรา ไม่มีฟังก์ชันดังกล่าว เนื่องจากเป็นไปไม่ได้ที่จะเพิ่มแท็กโฆษณาลงในแท็กเนื้อหาโดยอัตโนมัติ เว้นแต่คุณจะแก้ไขด้วยตนเองเมื่อเพิ่มบทความซึ่งไม่น่าเบื่อ
ฉันไม่เคยคิดที่จะใช้ css เพื่อควบคุมมันเลย สาเหตุหลักมาจากฉันไม่ได้คาดหวังว่าจะมีแอตทริบิวต์ที่ชัดเจน วันนี้ฉันบังเอิญเห็นคำแนะนำและพบว่าการใช้การตัดข้อความนั้นง่ายมาก
ตัวอย่างรหัส:
สิ่งสำคัญอยู่ที่บทบาทของ clear:left การล้างมีคุณลักษณะสามประการ: clear:both, clear:left และ clear:right ซึ่งระบุถึงการล้างบล็อกลอยทั้งสองด้าน ด้านซ้าย และด้านขวาตามลำดับ การเพิ่ม clear:left ให้กับเลเยอร์โฆษณาหมายความว่าเลเยอร์จะไม่ลอยสัมพันธ์กับเลเยอร์ว่างอีกต่อไป และจะเลื่อนลงด้านล่าง เยี่ยมมาก 555
มาเปรียบเทียบกัน:
หากคุณเพิ่มอันนี้:
น่าเสียดายที่การทดสอบข้างต้นพบว่ามีเพียง IE เท่านั้นที่เป็นไปได้ Firefox และ Opera ให้ผลลัพธ์ที่แตกต่างกัน ผลของ IE คือรูปภาพจะเลื่อนลงโดยอัตโนมัติเมื่อพบกับเลเยอร์โฆษณา Firefox จะไม่เลื่อนลง แต่จะไม่ครอบคลุมเลเยอร์โฆษณา เพราะเลเยอร์โฆษณาอยู่ด้านหน้า ในโอเปร่า ภาพจะไม่เลื่อนลงและจะบังเลเยอร์โฆษณาด้วย ตลกดี
ปรับปรุงอีกครั้ง:
ในที่สุดก็เสร็จแล้ว มันค่อนข้างสมบูรณ์แบบ และเอฟเฟกต์ของเนื้อหาโฆษณาโดยรอบก็เสร็จสมบูรณ์แล้ว :)
//2008-02-29, แก้ไขโดย: คืออะไร
ลืมเพิ่ม
มีคนถามว่าควรล้อมข้อความด้านบนและล่างขวาหรือเปล่า ผมจึงเปลี่ยนดังนี้
เนื้อหาข่าว
|