แบบฝึกหัด Responsive Website Design : ข้อที่ 2 จงออกแบบเว็บไซต์แบบ Responsive ตามภาพตัวอย่างต่อไปนี้

แบบฝึกหัด #240
เขียนโดย :
มีผู้อ่าน : 2,625 คน วันนี้ : 2 คน

สวัสดีครับผม วันนี้กลับมากับแบบฝึกหัดจากคอร์ส Responsive Website Design ในข้อที่ 2 กันนะครับ ลองทำกันดูนะครับ หรือผู้ที่กำลังเริ่มหัดเขียน Responsive ด้วย CSS อยู่ก็สามารถลองทำได้ด้วยนะครับ


โอเคครับ มาเริ่มกันเลยดีกว่า...

 

โจทย์ของเราก็คือ
1. ให้ออกแบบเว็บไซต์ตาม ภาพที่ 1 เมื่อบราวเซอร์มีขนาดความกว้างมากกว่า 960px ( pixels )
2. และเมื่อย่อขนาดของบราวเซอร์กว้างน้อยกว่า 600px ( pixels ) ให้หน้าเว็บไซต์เปลี่ยนไปเป็นตาม ภาพที่ 2
3.
 และเมื่อย่อขนาดของบราวเซอร์กว้างมากกว่า 600px ( pixels ) ให้หน้าเว็บไซต์เปลี่ยนไปเป็นตาม ภาพที่ 3

หมายเหตุ : สำหรับโจทย์นี้ใช้แค่ Tag DIV เท่านั้นและใช้อยู่ที่ 6 ตัว หรือน้อยกว่าไม่มากไปกว่านั้นนะครับ มาลองทำดูนะครับ ว่าได้ตามนี้กันหรือเปล่า  


หากติดปัญหาตรงไหน สามารถเข้ามาสอบถามได้ที่ Fanpage Who Do Coder ได้เลยนะครับ