Bố cục thanh bên và nội dung

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 28 trên 35.

Bố cục thanh bên + nội dung là một kiểu bố cục thích ứng phổ biến, gồm vùng nội dung chính và thanh bên để điều hướng hoặc hiển thị thông tin bổ sung.

Bắt đầu với cấu trúc HTML cơ bản:

<div class="container">
  <main class="content">Main content here</main>
  <aside class="sidebar">Sidebar content here</aside>
</div>

Bây giờ, hãy thêm CSS theo hướng ưu tiên thiết bị di động:

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 20px;
}

.sidebar {
  padding: 20px;
  background-color: #f5f5f5;
}

Sau đó, thêm truy vấn media (media query) để tạo bố cục cạnh nhau trên màn hình lớn hơn:

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .content {
    flex: 3;
  }
  
  .sidebar {
    flex: 1;
  }
}

Thao tác này tạo bố cục linh hoạt, xếp chồng trên thiết bị di động và hiển thị cạnh nhau trên màn hình lớn hơn.

Thử thách

Dễ

Bạn được cung cấp một bố cục thanh bên + nội dung có thiết kế đáp ứng theo hướng ưu tiên thiết bị di động.

Nhiệm vụ của bạn:

Đặt thanh bên ở bên phải phần nội dung trên màn hình rộng hơn 768px.
Trên màn hình lớn hơn, đặt chiều rộng vùng nội dung là 70% width và chiều rộng thanh bên là 30% width.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Sidebar + Content Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.6;
      background: #f5f7fa;
      color: #333;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-width: 1100px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .content {
      padding: 25px;
    }

    .content h2 {
      color: #2a6592;
      margin-bottom: 15px;
    }

    .content p {
      margin-bottom: 1em;
    }
    
    .sidebar {
      padding: 25px;
      background-color: #eaf3fa;
      border-left: 3px solid #2a6592;
    }
    
    .sidebar h3 {
      margin-bottom: 15px;
      color: #2a6592;
    }

    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }

    .sidebar li {
      margin: 10px 0;
    }

    .sidebar a {
      text-decoration: none;
      color: #2a6592;
      font-weight: 500;
      transition: color 0.2s;
    }

    .sidebar a:hover {
      color: #17405d;
    }

    @media (min-width: 768px) {

    }
  </style>
</head>
<body>
  <div class="container">
    <main class="content">
      <h2>Exploring Italy: A Travel Story</h2>
      <p>Italy is a country full of culture, history, and delicious food. From the romantic canals of Venice to the ancient ruins of Rome, every corner tells a story.</p>
      <p>During my trip, I explored Florence’s Renaissance art, enjoyed authentic pizza in Naples, and relaxed on the beautiful Amalfi Coast. Each city offered something unique and unforgettable.</p>
      <p>If you’re planning a trip, I recommend taking the time to explore both big cities and small villages. You’ll find hidden gems, welcoming locals, and memories that last forever.</p>
    </main>
    <aside class="sidebar">
      <h3>More Travel Guides</h3>
      <ul>
        <li><a href="#">Top 10 Things to Do in Rome</a></li>
        <li><a href="#">A Foodie’s Guide to Naples</a></li>
        <li><a href="#">Venice on a Budget</a></li>
        <li><a href="#">Best Beaches of Amalfi Coast</a></li>
      </ul>
    </aside>
  </div>
</body>
</html>