Lớp circular progress
Bài học 7 trên 11 trong khóa học Thanh tiến trình hình tròn | Dự án front-end của Coddy.
Thử thách
Trung bìnhNhắm đến lớp circular-progress:
- Căn giữa các phần tử bằng Flex (đặt align-items và justify-content thành center).
- Đặt chiều rộng và chiều cao thành 200 pixel.
- Đặt bán kính đường viền thành 50%.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Viết code HTML ở đây -->
<script src="script.js"></script>
</body>
</html>Tất cả bài học trong Thanh tiến trình hình tròn | Dự án front-end
1Giới thiệu
Bạn sẽ tạo ra gì?4JavaScript
Làm cho nó chạy!
3CSS
Bộ chọn toàn cụcBodyLớp containerLớp circular progressCircular progress ::beforeLớp giá trị tiến trìnhLớp văn bảnTự luyện tập: Playground Web