Menu
CoddyTech
Bắt đầu học

Tạo kiểu mục danh sách

Bài học 11 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 thêm kiểu dáng cho các mục trong danh sách; nhờ đó, bạn có thể điều chỉnh biểu tượng cho phù hợp.

challenge icon

Thử thách

Dễ

Chọn các mục trong danh sách thuộc lớp điều hướng và danh sách không có thứ tự .navigation ul li:

  1. Đặt chiều cao và chiều rộng thành 35px, lề thành 1rem.
  2. Đặt khoảng đệm thành 0 1rem.
  3. Đặt màu tùy ý! (đề xuất: white)
  4. Đặt bán kính đường viền thành 50%.
  5. Đặt display thành flex, align-items và justify-content thành center.

  6. Thêm kiểu bên dưới:

    cursor: pointer;
transition: all 0.2s linear;

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