<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T08:49:47+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "zh"
}
-->
# 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) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。