Menu
CoddyTech
Bắt đầu học

Điện toán đám mây III

Bài học 6 trên 18 trong khóa học Dự án mây chuyển động với HTML/CSS/JS của Coddy.

challenge icon

Thử thách

Dễ

Trong tệp HTML, tạo một div bên trong div đám mây (.cloud, thêm một cái nữa!) với tên lớp "cloudBubble2".

 

Trong tệp CSS, chọn div mới và đặt:

  1. width thành 60px
  2. height thành 60px
  3. màu nền giống với div đám mây
  4. bán kính đường viền là 30px
  5. position thành absolute
  6. top thành -30px
  7. right thành 30px

Cuối cùng, xóa margin khỏi div .cloud.

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 Dự án mây chuyển động với HTML/CSS/JS

1Giới thiệu

Giới thiệu

4Thử sức với JS

Tạo đám mâyBài học dự ánVị trí ngẫu nhiênBài học dự ánKích thước ngẫu nhiênBài học dự án

2Vùng chứa

Phần thânVùng chứaBài học dự án

5Di chuyển đám mây

Giá trị cố địnhBài học dự ánDi chuyển sang phảiBài học dự ánĐổi hướng luân phiênBài học dự ánBắt đầu ngayBài học dự ánNgẫu nhiên hóa mọi thứBài học dự án

3Điện toán đám mây

Điện toán đám mây IBài học dự ánĐiện toán đám mây IIBài học dự ánĐiện toán đám mây IIIBài học dự án

6Nhiều đám mây

Chèn HTML bằng JSBài học dự ánChèn các đám mâyBài học dự ánLặp qua tất cảBài học dự ánHoàn thiệnBài học dự án

Tự luyện tập: Playground Web