Menu
CoddyTech
Bắt đầu học

Lớp bao biểu mẫu

Bài học 10 trên 19 trong khóa học Bản sao trang đăng nhập Netflix | Dự án front-end của Coddy.

challenge icon

Thử thách

Dễ

Nhắm đến lớp form-wrapper:

  1. Đặt position thành absolute. Đồng thời, đặt vị trí cách mép trên 55% và cách mép trái 50%.

  2. Đặt transform thành translate (-50%, -50%) như bên dưới:

    transform: translate(-50%, -50%);

  3. Đặt width là 450 pixel.
  4. Đặt padding là 90 pixel.

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 Bản sao trang đăng nhập Netflix | Dự án front-end

1Giới thiệu

Bạn sẽ tạo ra gì?

4CSS - II

NútBài học dự ánThay đổi nútBài học dự ánTô màu thêmBài học dự ánPhần dướiBài học dự án

2HTML

Thiết lập tiêu đề và phần baoTrường nhập liệu trong biểu mẫu IBài học dự ánTrường nhập liệu trong biểu mẫu IIBài học dự ánNútBài học dự ánVăn bảnBài học dự ánHoàn thiện HTMLBài học dự án

3CSS - I

Thẻ phổ quátBài học dự ánNavBài học dự ánLớp bao biểu mẫuBài học dự ánWrapper h2 và formBài học dự ánLớp điều khiển biểu mẫuBài học dự ánInputBài học dự ánLabelBài học dự ánHiệu ứng dịch chuyển khi focusBài học dự án

Tự luyện tập: Playground Web