Menu
CoddyTech
Bắt đầu học

Tạo kiểu thanh điều hướng

Bài học 9 trên 12 trong khóa học Dự án thanh điều hướng dưới cùng với HTML/CSS của Coddy.

Hãy tạo kiểu cho thanh điều hướng!

challenge icon

Thử thách

Dễ

Nhắm đến lớp “navigation”:

  1. Để đặt vị trí:

    a. Đặt vị trí thành absolute.

    b. Đặt khoảng cách từ cạnh dưới thành 32px.

    c. Đặt bán kính đường viền thành 24px.

    d. Đặt vị trí bên trái thành 50%.

  2. Thêm kiểu chuyển đổi bên dưới:

    transform: translate(-50%, 0);
  3. Đặt màu nền thành màu bạn thích! (đề xuất: purple)

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 thanh điều hướng dưới cùng với HTML/CSS

1Thanh điều hướng

Thiết lập codemain-containerBài học dự ánThanh điều hướngBài học dự ánDanh sách không thứ tự và tiêu đềBài học dự ánMục danh sách và tiêu đềBài học dự ánThêm biểu tượngBài học dự án

2Phong cách

Thẻ phổ quátBài học dự ánThân trangBài học dự ánTạo kiểu thanh điều hướngBài học dự ánTạo kiểu danh sách không thứ tựBài học dự ánTạo kiểu mục danh sáchBài học dự ánHoạt ảnh biểu tượng khi di chuộtBài học dự án

Tự luyện tập: Playground Web