Web-Dev-For-Beginners/translations/hk/3-terrarium/2-intro-to-css/assignment.md

CSS 重構作業

目標

重構「玻璃花園」項目，使用 Flexbox 或 CSS Grid 進行佈局。根據需要更新 HTML 和 CSS，以實現現代化、響應式的設計。您不需要實現可拖動的元素——只需專注於佈局和樣式。

指示

1. 創建一個新版本 的玻璃花園應用。更新標記和 CSS，使用 Flexbox 或 CSS Grid 進行佈局。
2. 確保藝術和元素保持原樣，與原始版本一致。
3. 在至少兩個不同的瀏覽器中測試您的設計（例如，Chrome、Firefox、Edge）。
4. 截取您的玻璃花園在每個瀏覽器中的屏幕截圖，以展示跨瀏覽器的兼容性。
5. 提交 您更新的代碼和屏幕截圖。

評分標準

評分項目	優秀表現	合格表現	需要改進
佈局	完全使用 Flexbox 或 CSS Grid 進行重構；視覺效果吸引人且響應式	部分元素重構；部分使用 Flexbox 或 Grid	很少或未使用 Flexbox 或 Grid；佈局未更改
跨瀏覽器	提供多個瀏覽器的屏幕截圖；外觀一致	僅提供一個瀏覽器的屏幕截圖；有輕微不一致	未提供屏幕截圖或存在重大不一致
代碼質量	HTML/CSS 乾淨且組織良好；有清晰的註解	有一定的組織；註解較少	代碼混亂；缺乏註解

提示

• 查看 Flexbox 和 CSS Grid 指南。
• 使用瀏覽器開發工具測試響應式設計。
• 在代碼中添加註解以提高清晰度。

---

免責聲明：
本文件已使用人工智能翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。