<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:00:45+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "tw"
}
-->
# 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](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 和 [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 指南。
- 使用瀏覽器開發工具測試響應式設計。
- 在程式碼中添加註解以提高清晰度。

---

**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋不承擔責任。