<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T08:56:56+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "hk"
}
-->
# 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/) 指南。
- 使用瀏覽器開發工具測試響應式設計。
- 在代碼中添加註解以提高清晰度。

---

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