Lớp moon

Bài học 7 trên 10 trong khóa học Dự án HTML/CSS: hoạt ảnh nhật thực của Coddy.

Thử thách

Dễ

Trong tệp CSS, nhắm đến lớp moon:

Đặt chiều rộng và chiều cao của lớp moon thành 220px.
Đặt border-radius thành 50%.
Đặt position của lớp moon thành relative.
Đặt background-image thành linear-gradient(30deg, #13223f, #0e1a30).

Bây giờ bạn sẽ thấy mặt trăng!

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML tại đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Dự án HTML/CSS: hoạt ảnh nhật thực

1HTML

Bạn sẽ tạo gì?Thiết lập code Khung chứa Mặt Trăng

2CSS

Thẻ toàn cục

Thẻ html

Thẻ body

Lớp moon

Phần tử giả của lớp moon

Hoạt ảnh nhật thực

Tính thích ứng

Tự luyện tập: Playground Web