You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.5 KiB
5.5 KiB
งานปรับปรุง CSS
วัตถุประสงค์
ปรับปรุงโปรเจกต์ terrarium ให้ใช้ Flexbox หรือ CSS Grid สำหรับการจัดวางเลย์เอาต์ ปรับปรุง HTML และ CSS ตามความจำเป็นเพื่อให้ได้ดีไซน์ที่ทันสมัยและตอบสนอง คุณไม่จำเป็นต้องทำให้ส่วนประกอบสามารถลากได้—เน้นที่การจัดวางและการออกแบบเท่านั้น
คำแนะนำ
- สร้างเวอร์ชันใหม่ ของแอป terrarium ปรับปรุงโครงสร้าง HTML และ CSS ให้ใช้ Flexbox หรือ CSS Grid สำหรับการจัดวางเลย์เอาต์
- ตรวจสอบให้แน่ใจว่าองค์ประกอบและงานศิลป์อยู่ครบ เหมือนในเวอร์ชันต้นฉบับ
- ทดสอบการออกแบบของคุณ ในเบราว์เซอร์อย่างน้อยสองตัว (เช่น Chrome, Firefox, Edge)
- ถ่ายภาพหน้าจอ ของ terrarium ในแต่ละเบราว์เซอร์เพื่อแสดงความเข้ากันได้ระหว่างเบราว์เซอร์
- ส่ง โค้ดที่ปรับปรุงแล้วและภาพหน้าจอ
เกณฑ์การประเมิน
| เกณฑ์ | ดีเยี่ยม | พอใช้ | ต้องปรับปรุง |
|---|---|---|---|
| การจัดวาง | ปรับปรุงโดยใช้ Flexbox หรือ CSS Grid อย่างเต็มรูปแบบ; สวยงามและตอบสนอง | ปรับปรุงบางส่วน; ใช้ Flexbox หรือ Grid บางส่วน | ใช้ Flexbox หรือ Grid น้อยมากหรือไม่ได้ใช้เลย; เลย์เอาต์ไม่เปลี่ยนแปลง |
| ความเข้ากันได้ระหว่างเบราว์เซอร์ | มีภาพหน้าจอจากหลายเบราว์เซอร์; ลักษณะเหมือนกันในทุกเบราว์เซอร์ | มีภาพหน้าจอจากเบราว์เซอร์เดียว; มีความแตกต่างเล็กน้อย | ไม่มีภาพหน้าจอหรือมีความแตกต่างมาก |
| คุณภาพของโค้ด | HTML/CSS ที่สะอาดและจัดระเบียบดี; มีคอมเมนต์ชัดเจน | มีการจัดระเบียบบางส่วน; มีคอมเมนต์เล็กน้อย | โค้ดไม่เป็นระเบียบ; ไม่มีคอมเมนต์ |
เคล็ดลับ
- ทบทวน Flexbox และ CSS Grid เพื่อความเข้าใจ
- ใช้เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์เพื่อทดสอบการตอบสนอง
- เพิ่มคอมเมนต์ในโค้ดของคุณเพื่อความชัดเจน
ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามนุษย์ที่มีความเชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้