分屏布局

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 29 课，共 35 课。

分屏布局会将视口划分为两个不同的区域，通常并排显示。这种模式适用于比较内容、展示双重主题，或将导航与主要内容分开。

首先，我们来创建 HTML 结构：

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

现在，让我们添加 CSS 来创建分屏布局：

.split-screen {
  display: flex;
  flex-direction: column;
}

/* 在手机上，各部分会垂直排列 */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* 在较大的屏幕上，它们会并排显示 */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

按照移动优先的方法，这个布局在移动设备上起初是垂直堆叠的。当屏幕宽度达到 768px 或更大时，布局会变为水平分栏。

挑战正文：

为产品展示创建一个响应式分屏布局。左侧应显示产品信息，右侧应显示产品图片。

要求：

在移动设备上（768px 以下），分屏应为纵向；在更大的屏幕上，应为横向
左侧应使用深色背景（#222）和白色文字
右侧应使用浅色背景（#f5f5f5）
两侧都添加 2rem 的内边距
在宽度大于 768px 的屏幕上，左侧应占 40% 的宽度，右侧应占 60%

挑战

简单

你会看到一个采用移动优先样式的 HTML 页面，其中包含两个部分。你的任务是将它改成适合桌面设备的分屏布局。

在较大的屏幕（min-width: 768px）上，让这两个部分并排显示。
将左侧的背景颜色设为 rgb(74, 144, 226)，文字颜色设为 rgb(255, 255, 255)。
将右侧的背景颜色设为 rgb(255, 255, 255)，文字颜色设为 rgb(51, 51, 51)。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

前端实践中的所有课

自己练习： Web 在线编辑器