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: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，
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/ ) 指南。
- 使用浏览器开发者工具测试响应性。
- 为代码添加注释以提高可读性。
---
** 免责声明**：
本文档使用AI翻译服务 [Co-op Translator ](https://github.com/Azure/co-op-translator ) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。
