วิธีการสร้าง:แนวรูปภาพ
- หน้าก่อน รูปภาพที่ตอบสนองและแสดงเนื้อหาตาราง
- หน้าต่อไป คลังรูปภาพ
เรียนรู้วิธีการสร้างแนวรูปภาพ。
แนวรูปภาพ
เรียนรู้วิธีการสร้างรูปภาพกลอง โดยเพียงแค่กดปุ่ม เพื่อเปลี่ยนไประหว่างรูปภาพสี่ภาพ สองภาพ หรือรวมกันเต็มพื้นหน้า:
สร้างแนวรูปภาพ
ขั้นตอนแรก - เพิ่ม HTML:
<div class="row"> <div class="column"> <img src="wedding.jpg"> <img src="rocks.jpg"> <img src="falls2.jpg"> <img src="paris.jpg"> <img src="nature.jpg"> <img src="mist.jpg"> <img src="paris.jpg"> </div> <div class="column"> <img src="underwater.jpg"> <img src="ocean.jpg"> <img src="wedding.jpg"> <img src="mountainskies.jpg"> <img src="rocks.jpg"> <img src="underwater.jpg"> </div> <div class="column"> <img src="wedding.jpg"> <img src="rocks.jpg"> <img src="falls2.jpg"> <img src="paris.jpg"> <img src="nature.jpg"> <img src="mist.jpg"> <img src="paris.jpg"> </div> <div class="column"> <img src="underwater.jpg"> <img src="ocean.jpg"> <img src="wedding.jpg"> <img src="mountainskies.jpg"> <img src="rocks.jpg"> <img src="underwater.jpg"> </div> </div>
ขั้นที่สอง - เพิ่ม CSS:
สร้างเล่นเนื้อหาด้วย CSS Flexbox:
.row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* สร้างแถวที่มีคอลัมน์ที่เท่ากัน */ .column { flex: 50%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; }
ขั้นที่สาม - เพิ่ม JavaScript:
สร้างตัวมิตรภาพกราฟส์ที่ควบคุมได้ด้วย JavaScript:
<button onclick="one()">1</button> <button onclick="two()">2</button> <button onclick="four()">4</button> <script> // ดึงอิเลเมนต์ที่มี class="column" var elements = document.getElementsByClassName("column"); // ประกาศตัวแปร "วน" var i; // ภาพครึ่งจอ function one() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "100%"; } } // ภาพสองในแถว function two() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "50%"; } } // ภาพสี่ในแถว function four() { for (i = 0; i < elements.length; i++) { elements[i].style.flex = "25%"; } } </script>
หน้าที่เกี่ยวข้อง
สอน:CSS Flexbox
- หน้าก่อน รูปภาพที่ตอบสนองและแสดงเนื้อหาตาราง
- หน้าต่อไป คลังรูปภาพ