编程马·菜鸟教程

Appearance

第12章：进阶实战 ​

在本节中，我们将通过几个进阶的实战案例来进一步巩固所学的Flex布局知识，包括登录页布局和响应式布局。

实战5：登录页布局 ​

登录页是网站的重要入口，使用Flex布局可以轻松实现美观的登录页布局。

12.1 页面整体布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>登录页布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .login-form {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 30px;
      width: 400px;
    }
    
    .form-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .form-header h1 {
      margin: 0;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-form">
      <div class="form-header">
        <h1>用户登录</h1>
      </div>
      <!-- 表单内容将在下面添加 -->
    </div>
  </div>
</body>
</html>

12.2 表单元素布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>登录页布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .login-form {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 30px;
      width: 400px;
    }
    
    .form-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .form-header h1 {
      margin: 0;
      color: #333;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #666;
    }
    
    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-form">
      <div class="form-header">
        <h1>用户登录</h1>
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请输入密码">
      </div>
      <!-- 按钮将在下面添加 -->
    </div>
  </div>
</body>
</html>

12.3 按钮布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>登录页布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    .login-form {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 30px;
      width: 400px;
    }
    
    .form-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .form-header h1 {
      margin: 0;
      color: #333;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
      color: #666;
    }
    
    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .form-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }
    
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    
    .btn-primary {
      background-color: #3498db;
      color: white;
    }
    
    .forgot-password {
      color: #3498db;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-form">
      <div class="form-header">
        <h1>用户登录</h1>
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请输入密码">
      </div>
      <div class="form-actions">
        <a href="#" class="forgot-password">忘记密码？</a>
        <button class="btn btn-primary">登录</button>
      </div>
    </div>
  </div>
</body>
</html>

12.4 完整代码讲解与优化 ​

  • 使用 display: flex 和 justify-content: center; align-items: center 实现页面居中
  • 使用 flex 布局实现表单元素的对齐和按钮的布局
  • 响应式设计：在小屏幕上调整表单宽度
  • 视觉优化：添加阴影、圆角等效果提升用户体验

实战6：响应式布局 ​

响应式布局是现代Web开发的重要要求，使用Flex布局可以轻松实现响应式设计。

12.5 媒体查询基础 ​

媒体查询是实现响应式布局的核心技术，它允许我们根据屏幕尺寸应用不同的样式。

css
@media (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 在屏幕宽度在769px到1024px之间时应用的样式 */
}

@media (min-width: 1025px) {
  /* 在屏幕宽度大于等于1025px时应用的样式 */
}

12.6 PC端：多列布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>响应式布局 - PC端</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .column {
      flex: 1;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
    }
    
    .column h2 {
      margin-top: 0;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>列 1</h2>
      <p>这是第一列内容，在PC端显示为多列布局。</p>
    </div>
    <div class="column">
      <h2>列 2</h2>
      <p>这是第二列内容，在PC端显示为多列布局。</p>
    </div>
    <div class="column">
      <h2>列 3</h2>
      <p>这是第三列内容，在PC端显示为多列布局。</p>
    </div>
  </div>
</body>
</html>

12.7 移动端：单列布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>响应式布局 - 移动端</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px;
    }
    
    .column {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
    }
    
    .column h2 {
      margin-top: 0;
      color: #333;
    }
    
    @media (min-width: 768px) {
      .container {
        flex-direction: row;
        max-width: 1200px;
        margin: 0 auto;
      }
      
      .column {
        flex: 1;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>列 1</h2>
      <p>这是第一列内容，在移动端显示为单列布局，在PC端显示为多列布局。</p>
    </div>
    <div class="column">
      <h2>列 2</h2>
      <p>这是第二列内容，在移动端显示为单列布局，在PC端显示为多列布局。</p>
    </div>
    <div class="column">
      <h2>列 3</h2>
      <p>这是第三列内容，在移动端显示为单列布局，在PC端显示为多列布局。</p>
    </div>
  </div>
</body>
</html>

12.8 实操：一键切换响应式效果 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>响应式布局演示</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    
    .card {
      flex: 1 1 300px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
    }
    
    .card h2 {
      margin-top: 0;
      color: #333;
    }
    
    .controls {
      background-color: white;
      padding: 20px;
      margin: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      text-align: center;
    }
    
    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin: 0 10px;
    }
    
    .btn-primary {
      background-color: #3498db;
      color: white;
    }
    
    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%;
      }
    }
  </style>
</head>
<body>
  <div class="controls">
    <h1>响应式布局演示</h1>
    <p>调整浏览器窗口大小，观察布局变化</p>
    <button class="btn btn-primary" onclick="toggleLayout()">切换布局</button>
  </div>
  <div class="container" id="container">
    <div class="card">
      <h2>卡片 1</h2>
      <p>这是一张卡片，在不同屏幕尺寸下会自动调整布局。</p>
    </div>
    <div class="card">
      <h2>卡片 2</h2>
      <p>这是另一张卡片，在不同屏幕尺寸下会自动调整布局。</p>
    </div>
    <div class="card">
      <h2>卡片 3</h2>
      <p>这是第三张卡片，在不同屏幕尺寸下会自动调整布局。</p>
    </div>
    <div class="card">
      <h2>卡片 4</h2>
      <p>这是第四张卡片，在不同屏幕尺寸下会自动调整布局。</p>
    </div>
  </div>
  
  <script>
    function toggleLayout() {
      const container = document.getElementById('container');
      if (container.style.flexDirection === 'column') {
        container.style.flexDirection = 'row';
      } else {
        container.style.flexDirection = 'column';
      }
    }
  </script>
</body>
</html>

实操练习 ​

  1. 实现一个完整的登录页，包括表单验证和错误提示
  2. 实现一个响应式仪表盘布局，在不同屏幕尺寸下显示不同的布局
  3. 实现一个响应式导航栏，在移动端显示为汉堡菜单
  4. 实现一个响应式卡片网格，在不同屏幕尺寸下显示不同数量的列

通过本节的学习，你已经掌握了Flex布局在进阶场景中的应用。这些实战案例涵盖了企业级开发中常见的布局需求，通过练习这些案例，你可以更加熟练地使用Flex布局来实现复杂的响应式布局。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建