Menu
CoddyTech
Bắt đầu học

Lớp container

Bài học 6 trên 11 trong khóa học Thanh tiến trình hình tròn | Dự án front-end của Coddy.

challenge icon

Thử thách

Trung bình

Lớp mục tiêu container:

  1. Đặt display thành flex và căn giữa các mục trong phần tử container.
  2. Đặt flex-direction thành column
  3. Đặt màu nền tùy ý.
  4. Đặt chiều rộng thành 400 pixel.
  5. Đặt padding và border radius tùy ý.
  6. Đặt khoảng cách là 20 pixel.

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 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!Bài học dự án

2HTML

Thiết lậpHoàn thiện HTMLBài học dự án

3CSS

Bộ chọn toàn cụcBài học dự ánBodyBài học dự ánLớp containerBài học dự ánLớp circular progressBài học dự ánCircular progress ::beforeBài học dự ánLớp giá trị tiến trìnhBài học dự ánLớp văn bảnBài học dự án

Tự luyện tập: Playground Web