Web-Dev-For-Beginners/translations/mo/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 指南。
• 使用瀏覽器開發工具測試響應式設計。
• 在程式碼中添加註解以提高清晰度。

---

免責聲明：
本文檔已使用AI翻譯服務 Co-op Translator 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動化翻譯可能包含錯誤或不準確之處。應以原始語言的文件作為權威來源。對於關鍵信息，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。