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.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
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，
2. ** 確保藝術和元素保持原樣**，與原始版本一致。
3. ** 在至少兩個不同的瀏覽器中測試您的設計**（ ， ）
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 ) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或錯誤解釋概不負責。
