3.4 KiB
Bài Tập Tái Cấu Trúc CSS
Mục Tiêu
Tái cấu trúc dự án terrarium để sử dụng Flexbox hoặc CSS Grid cho bố cục. Cập nhật HTML và CSS nếu cần để đạt được thiết kế hiện đại, đáp ứng. Bạn không cần triển khai các phần tử có thể kéo thả—chỉ tập trung vào bố cục và kiểu dáng.
Hướng Dẫn
- Tạo một phiên bản mới của ứng dụng terrarium. Cập nhật mã HTML và CSS để sử dụng Flexbox hoặc CSS Grid cho bố cục.
- Đảm bảo các hình ảnh và phần tử được giữ nguyên như trong phiên bản gốc.
- Kiểm tra thiết kế của bạn trên ít nhất hai trình duyệt khác nhau (ví dụ: Chrome, Firefox, Edge).
- Chụp ảnh màn hình terrarium của bạn trên mỗi trình duyệt để chứng minh khả năng tương thích đa trình duyệt.
- Nộp mã đã cập nhật và ảnh chụp màn hình.
Tiêu Chí Đánh Giá
| Tiêu Chí | Xuất Sắc | Đạt Yêu Cầu | Cần Cải Thiện |
|---|---|---|---|
| Bố Cục | Được tái cấu trúc hoàn toàn bằng Flexbox hoặc CSS Grid; đẹp mắt và đáp ứng | Một số phần tử được tái cấu trúc; sử dụng một phần Flexbox hoặc Grid | Ít hoặc không sử dụng Flexbox hoặc Grid; bố cục không thay đổi |
| Đa Trình Duyệt | Cung cấp ảnh chụp màn hình cho nhiều trình duyệt; hiển thị nhất quán | Ảnh chụp màn hình cho một trình duyệt; có một số điểm không nhất quán | Không có ảnh chụp màn hình hoặc có nhiều điểm không nhất quán |
| Chất Lượng Mã | HTML/CSS sạch sẽ, tổ chức tốt; có bình luận rõ ràng | Tổ chức ở mức trung bình; ít bình luận | Mã không tổ chức; thiếu bình luận |
Mẹo
- Xem lại hướng dẫn về Flexbox và CSS Grid.
- Sử dụng công cụ phát triển trình duyệt để kiểm tra khả năng đáp ứng.
- Bình luận mã của bạn để dễ hiểu.
Tuyên bố miễn trừ trách nhiệm:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với các thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.