Web-Dev-For-Beginners/translations/zh/3-terrarium/2-intro-to-css/assignment.md

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 和 CSS Grid 指南。
• 使用浏览器开发者工具测试响应性。
• 为代码添加注释以提高可读性。

---

免责声明：
本文档使用AI翻译服务 Co-op Translator 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。