Khóa học Lập trình miễn phí

Dashboard Layout với CSS Grid

Lập trình

Mô tả: Tạo layout dashboard hiện đại với CSS Grid

Hướng dẫn

Lời giải

Tạo dashboard layout với: - Header cố định - Sidebar điều hướng - Main content area - Thống kê cards - Responsive design

Code mẫu

<!DOCTYPE html>
<html>
<head>
  <style>
    .dashboard {
      /* Viết CSS của bạn ở đây */
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <header class="header">Dashboard</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">
      <div class="stats-grid">
        <div class="stat-card">Thống kê 1</div>
        <div class="stat-card">Thống kê 2</div>
        <div class="stat-card">Thống kê 3</div>
        <div class="stat-card">Thống kê 4</div>
      </div>
    </main>
  </div>
</body>
</html>

Thông tin bài tập

Khóa học: HTML & CSS Nâng cao

Bài học: CSS Grid Layout

Loại bài tập: Lập trình

Độ khó: Trung cấp

Thời lượng: 70 phút