第二章：基础页面实现 - 第一节：登录与注册页面 - 表单与身份验证UI

发布于：2025-04-03 ⋅ 阅读:(39) ⋅ 点赞:(0)

文章目录

学习目标

  • 分析和复制GitHub的登录与注册页面结构
  • 使用Tailwind CSS构建现代且符合GitHub风格的表单元素
  • 实现响应式设计，确保表单在各种设备上都有良好的展示
  • 学习表单验证的视觉反馈系统
  • 掌握GitHub身份验证UI的关键设计特点

GitHub登录与注册页面分析

GitHub的登录与注册页面设计简洁明了，专注于用户体验。这些页面具有以下特点：

  • 极简主义布局，减少干扰
  • 清晰的视觉层次结构，引导用户注意力
  • 一致的表单元素风格
  • 有意义的错误和成功状态视觉反馈
  • 辅助文本和链接，提供用户帮助

让我们从登录页面开始，然后构建注册页面。

登录页面实现

首先，让我们分析GitHub登录页面的结构，然后使用Tailwind CSS进行复刻。

页面结构拆解

GitHub登录页面包含以下主要区域：

  1. 顶部导航栏（简化版）
  2. 中央登录表单
  3. 登录选项（GitHub和企业服务器选择）
  4. 表单字段（用户名/邮箱和密码）
  5. 记住我选项
  6. 登录按钮
  7. 帮助链接（创建账户、忘记密码）
  8. 页脚区域

步骤1：创建基本HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in to GitHub · GitHub</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "github-blue": "#0969da",
            "github-green": "#2da44e",
            "github-red": "#cf222e",
            "github-yellow": "#bf8700",
            "github-purple": "#8250df",
            "github-bg": "#f6f8fa",
            "github-border": "#d0d7de",
            "github-text-primary": "#24292f",
            "github-text-secondary": "#57606a",
            "github-header-bg": "#24292f",
            "github-header-text": "#ffffff",
            "github-btn-primary": "#2da44e",
            "github-btn-primary-hover": "#2c974b",
          },
          fontFamily: {
            "github": [
              "-apple-system", 
              "BlinkMacSystemFont", 
              "Segoe UI", 
              "Noto Sans", 
              "Helvetica", 
              "Arial", 
              "sans-serif", 
              "Apple Color Emoji", 
              "Segoe UI Emoji"
            ],
          },
          borderRadius: {
            "github-md": "6px",
          },
          boxShadow: {
            "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
            "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
          }
        }
      }
    }
  </script>
</head>
<body class="bg-white font-github text-github-text-primary">
  <div class="min-h-screen flex flex-col">
    <!-- 内容将在这里添加 -->
  </div>
</body>
</html>

步骤2：添加GitHub Logo和登录选项

<div class="min-h-screen flex flex-col">
  <!-- Header -->
  <header class="w-full py-6 flex justify-center">
    <svg height="48" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="48" data-view-component="true" class="fill-github-text-primary">
      <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
    </svg>
  </header>

  <!-- Main Content -->
  <main class="flex-grow flex flex-col items-center justify-start py-10 px-4">
    <!-- Sign-in container -->
    <div class="w-full max-w-[340px] mx-auto">
      <h1 class="text-2xl font-semibold text-center mb-4">Sign in to GitHub</h1>
      
      <!-- Login type selection -->
      <div class="mb-4 bg-white border border-github-border rounded-github-md overflow-hidden">
        <div class="flex">
          <button class="flex-1 py-4 px-2 text-center bg-white border-b-2 border-github-blue text-github-blue font-semibold">
            Sign in with GitHub.com
          </button>
          <button class="flex-1 py-4 px-2 text-center text-github-text-secondary">
            Sign in with Enterprise
          </button>
        </div>
      </div>
    </div>
  </main>
</div>

步骤3：构建登录表单

<!-- 在Sign-in container内，login type selection后添加 -->
<!-- Login form -->
<div class="w-full border border-github-border rounded-github-md bg-white p-4 mt-4">
  <form>
    <!-- Username field -->
    <div class="mb-4">
      <label for="login_field" class="block font-medium text-sm mb-2">
        Username or email address
      </label>
      <input type="text" name="login" id="login_field" autocomplete="username" 
        class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
    </div>
    
    <!-- Password field with "Forgot password" link -->
    <div class="mb-4">
      <div class="flex justify-between items-center mb-2">
        <label for="password" class="block font-medium text-sm">
          Password
        </label>
        <a href="#" class="text-github-blue text-xs hover:underline">
          Forgot password?
        </a>
      </div>
      <input type="password" name="password" id="password" autocomplete="current-password" 
        class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
    </div>
    
    <!-- Sign in button -->
    <button type="submit" 
      class="w-full py-1.5 px-4 bg-github-btn-primary text-white font-medium rounded-github-md border border-github-border border-opacity-25 shadow-github-btn hover:bg-github-btn-primary-hover">
      Sign in
    </button>
  </form>
</div>

步骤4：添加记住我选项和新账户链接

<!-- 在login form内，Sign in button前添加 -->
<!-- Remember me checkbox -->
<div class="mb-4">
  <label class="flex items-center">
    <input type="checkbox" name="remember_me" id="remember_me" 
      class="rounded text-github-blue focus:ring-github-blue" />
    <span class="ml-2 text-sm">Keep me signed in</span>
  </label>
</div>

<!-- 在login form容器后添加 -->
<!-- Create account CTA -->
<div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
  <p class="text-sm">
    New to GitHub? 
    <a href="#" class="text-github-blue hover:underline">Create an account</a>.
  </p>
</div>

步骤5：添加页脚区域

<!-- 在main后，div.min-h-screen内添加 -->
<!-- Footer -->
<footer class="py-8 px-4">
  <div class="max-w-[340px] mx-auto">
    <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
      <li><a href="#" class="hover:text-github-blue hover:underline">Terms</a></li>
      <li><a href="#" class="hover:text-github-blue hover:underline">Privacy</a></li>
      <li><a href="#" class="hover:text-github-blue hover:underline">Docs</a></li>
      <li><a href="#" class="hover:text-github-blue hover:underline">Contact GitHub Support</a></li>
      <li><a href="#" class="hover:text-github-blue hover:underline">Manage cookies</a></li>
      <li><a href="#" class="hover:text-github-blue hover:underline">Do not share my personal information</a></li>
    </ul>
  </div>
</footer>

完整的登录页面代码

将上述所有步骤合并起来，我们得到以下完整的GitHub登录页面复刻：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in to GitHub · GitHub</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "github-blue": "#0969da",
            "github-green": "#2da44e",
            "github-red": "#cf222e",
            "github-yellow": "#bf8700",
            "github-purple": "#8250df",
            "github-bg": "#f6f8fa",
            "github-border": "#d0d7de",
            "github-text-primary": "#24292f",
            "github-text-secondary": "#57606a",
            "github-header-bg": "#24292f",
            "github-header-text": "#ffffff",
            "github-btn-primary": "#2da44e",
            "github-btn-primary-hover": "#2c974b",
          },
          fontFamily: {
            "github": [
              "-apple-system", 
              "BlinkMacSystemFont", 
              "Segoe UI", 
              "Noto Sans", 
              "Helvetica", 
              "Arial", 
              "sans-serif", 
              "Apple Color Emoji", 
              "Segoe UI Emoji"
            ],
          },
          borderRadius: {
            "github-md": "6px",
          },
          boxShadow: {
            "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
            "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
          }
        }
      }
    }
  </script>
</head>
<body class="bg-white font-github text-github-text-primary">
  <div class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="w-full py-6 flex justify-center">
      <svg height="48" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="48" data-view-component="true" class="fill-github-text-primary">
        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
      </svg>
    </header>

    <!-- Main Content -->
    <main class="flex-grow flex flex-col items-center justify-start py-10 px-4">
      <!-- Sign-in container -->
      <div class="w-full max-w-[340px] mx-auto">
        <h1 class="text-2xl font-semibold text-center mb-4">Sign in to GitHub</h1>
        
        <!-- Login type selection -->
        <div class="mb-4 bg-white border border-github-border rounded-github-md overflow-hidden">
          <div class="flex">
            <button class="flex-1 py-4 px-2 text-center bg-white border-b-2 border-github-blue text-github-blue font-semibold">
              Sign in with GitHub.com
            </button>
            <button class="flex-1 py-4 px-2 text-center text-github-text-secondary">
              Sign in with Enterprise
            </button>
          </div>
        </div>
        
        <!-- Login form -->
        <div class="w-full border border-github-border rounded-github-md bg-white p-4 mt-4">
          <form>
            <!-- Username field -->
            <div class="mb-4">
              <label for="login_field" class="block font-medium text-sm mb-2">
                Username or email address
              </label>
              <input type="text" name="login" id="login_field" autocomplete="username" 
                class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
            </div>
            
            <!-- Password field with "Forgot password" link -->
            <div class="mb-4">
              <div class="flex justify-between items-center mb-2">
                <label for="password" class="block font-medium text-sm">
                  Password
                </label>
                <a href="#" class="text-github-blue text-xs hover:underline">
                  Forgot password?
                </a>
              </div>
              <input type="password" name="password" id="password" autocomplete="current-password" 
                class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
            </div>
            
            <!-- Remember me checkbox -->
            <div class="mb-4">
              <label class="flex items-center">
                <input type="checkbox" name="remember_me" id="remember_me" 
                  class="rounded text-github-blue focus:ring-github-blue" />
                <span class="ml-2 text-sm">Keep me signed in</span>
              </label>
            </div>
            
            <!-- Sign in button -->
            <button type="submit" 
              class="w-full py-1.5 px-4 bg-github-btn-primary text-white font-medium rounded-github-md border border-github-border border-opacity-25 shadow-github-btn hover:bg-github-btn-primary-hover">
              Sign in
            </button>
          </form>
        </div>
        
        <!-- Create account CTA -->
        <div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
          <p class="text-sm">
            New to GitHub? 
            <a href="#" class="text-github-blue hover:underline">Create an account</a>.
          </p>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="py-8 px-4">
      <div class="max-w-[340px] mx-auto">
        <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
          <li><a href="#" class="hover:text-github-blue hover:underline">Terms</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Privacy</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Docs</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Contact GitHub Support</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Manage cookies</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Do not share my personal information</a></li>
        </ul>
      </div>
    </footer>
  </div>
</body>
</html>

提示：登录页面是公共页面，因此没有使用GitHub的顶部导航栏，而是使用了一个简化的标题和Logo。

表单验证状态

GitHub的表单验证提供即时的视觉反馈。让我们添加表单验证状态的样式：

错误状态样式

<!-- 错误状态的输入字段示例 -->
<div class="mb-4">
  <label for="username_error" class="block font-medium text-sm mb-2 text-github-red">
    Username or email address
  </label>
  <input type="text" id="username_error" value="" 
    class="w-full px-3 py-2 border border-github-red rounded-github-md focus:outline-none focus:border-github-red focus:ring-1 focus:ring-github-red bg-github-red bg-opacity-5" />
  <p class="mt-2 text-sm text-github-red">Incorrect username or password.</p>
</div>

成功状态样式

<!-- 成功状态的输入字段示例 -->
<div class="mb-4">
  <label for="username_success" class="block font-medium text-sm mb-2">
    Username or email address
  </label>
  <input type="text" id="username_success" value="example@github.com" 
    class="w-full px-3 py-2 border border-github-green rounded-github-md focus:outline-none focus:border-github-green focus:ring-1 focus:ring-github-green" />
</div>

注册页面实现

现在，让我们创建GitHub的注册页面。注册页面与登录页面有类似的结构，但有更多表单字段和一些额外的信息。

注册页面结构拆解

GitHub注册页面包含以下主要部分：

  1. 顶部导航栏（简化版）
  2. 欢迎标题和说明
  3. 注册表单（邮箱、密码、用户名）
  4. 邮件通知选项
  5. 验证码或人机验证
  6. 使用条款信息
  7. 注册按钮
  8. 已有账户链接
  9. 页脚区域

完整的注册页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Join GitHub · GitHub</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "github-blue": "#0969da",
            "github-green": "#2da44e",
            "github-red": "#cf222e",
            "github-yellow": "#bf8700",
            "github-purple": "#8250df",
            "github-bg": "#f6f8fa",
            "github-border": "#d0d7de",
            "github-text-primary": "#24292f",
            "github-text-secondary": "#57606a",
            "github-btn-primary": "#2da44e",
            "github-btn-primary-hover": "#2c974b",
          },
          fontFamily: {
            "github": [
              "-apple-system", 
              "BlinkMacSystemFont", 
              "Segoe UI", 
              "Noto Sans", 
              "Helvetica", 
              "Arial", 
              "sans-serif", 
              "Apple Color Emoji", 
              "Segoe UI Emoji"
            ],
          },
          borderRadius: {
            "github-md": "6px",
          },
          boxShadow: {
            "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
            "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
          }
        }
      }
    }
  </script>
</head>
<body class="bg-white font-github text-github-text-primary">
  <div class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="w-full py-6 flex justify-center">
      <svg height="48" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="48" data-view-component="true" class="fill-github-text-primary">
        <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
      </svg>
    </header>

    <!-- Main Content -->
    <main class="flex-grow flex flex-col items-center justify-start py-8 px-4">
      <!-- Sign-up container -->
      <div class="w-full max-w-[320px] mx-auto">
        <h1 class="text-2xl font-semibold text-center mb-2">Welcome to GitHub!</h1>
        <p class="text-github-text-secondary text-center mb-6">Let's begin the adventure</p>
        
        <!-- Registration form -->
        <div class="w-full bg-white">
          <form>
            <!-- Email field -->
            <div class="mb-4">
              <label for="email" class="block font-medium text-sm mb-2">
                Email address
              </label>
              <input type="email" name="email" id="email" autocomplete="email" 
                class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
            </div>
            
            <!-- Password field -->
            <div class="mb-4">
              <label for="password" class="block font-medium text-sm mb-2">
                Password
              </label>
              <input type="password" name="password" id="password" autocomplete="new-password" 
                class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
              <p class="mt-1 text-xs text-github-text-secondary">
                Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter.
              </p>
            </div>
            
            <!-- Username field -->
            <div class="mb-4">
              <label for="username" class="block font-medium text-sm mb-2">
                Username
              </label>
              <input type="text" name="username" id="username" autocomplete="username" 
                class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
              <p class="mt-1 text-xs text-github-text-secondary">
                Your username will be public and can be changed later.
              </p>
            </div>
            
            <!-- Email preferences -->
            <div class="mb-4">
              <label class="block font-medium text-sm mb-2">
                Email preferences
              </label>
              <label class="flex items-start">
                <input type="checkbox" name="email_marketing" id="email_marketing" 
                  class="rounded text-github-blue focus:ring-github-blue mt-1" />
                <span class="ml-2 text-xs text-github-text-secondary">
                  I would like to receive product updates, announcements, and offers from GitHub via email.
                </span>
              </label>
            </div>
            
            <!-- Terms acceptance -->
            <div class="mb-6">
              <p class="text-xs text-github-text-secondary mb-2">
                By creating an account, you agree to the 
                <a href="#" class="text-github-blue hover:underline">Terms of Service</a>. 
                For more information about GitHub's privacy practices, see the 
                <a href="#" class="text-github-blue hover:underline">GitHub Privacy Statement</a>. 
                We'll occasionally send you account-related emails.
              </p>
            </div>
            
            <!-- Submit button -->
            <button type="submit" 
              class="w-full py-1.5 px-4 bg-github-btn-primary text-white font-medium rounded-github-md border border-github-border border-opacity-25 shadow-github-btn hover:bg-github-btn-primary-hover">
              Create account
            </button>
          </form>
        </div>
        
        <!-- Sign-in link -->
        <div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
          <p class="text-sm">
            Already have an account? 
            <a href="#" class="text-github-blue hover:underline">Sign in</a>.
          </p>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="py-8 px-4">
      <div class="max-w-[320px] mx-auto">
        <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
          <li><a href="#" class="hover:text-github-blue hover:underline">Terms</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Privacy</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Security</a></li>
          <li><a href="#" class="hover:text-github-blue hover:underline">Contact GitHub</a></li>
        </ul>
      </div>
    </footer>
  </div>
</body>
</html>

表单验证增强

让我们增强表单验证，添加详细的视觉反馈和帮助文本。以下是一些常见的验证状态：

密码强度指示器

GitHub会在用户输入密码时提供密码强度反馈。下面是密码强度指示器的实现：

<!-- 替换原密码字段为以下内容 -->
<div class="mb-4">
  <label for="password" class="block font-medium text-sm mb-2">
    Password
  </label>
  <input type="password" name="password" id="password" autocomplete="new-password" 
    class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue" />
  
  <!-- 密码强度指示器 -->
  <div class="mt-2">
    <div class="w-full h-1 flex gap-1">
      <div class="flex-grow h-full bg-github-red bg-opacity-30 rounded-full"></div>
      <div class="flex-grow h-full bg-github-yellow bg-opacity-30 rounded-full"></div>
      <div class="flex-grow h-full bg-github-green bg-opacity-30 rounded-full"></div>
    </div>
    
    <div class="flex items-start gap-2 mt-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="fill-github-red">
        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
        <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
      </svg>
      <p class="text-xs text-github-text-secondary">
        Password requirements:
        <ul class="mt-1 pl-4 list-disc text-xs">
          <li>At least 8 characters</li>
          <li>At least one number</li>
          <li>At least one lowercase letter</li>
        </ul>
      </p>
    </div>
  </div>
</div>

用户名可用性检查

GitHub会在注册过程中检查用户名是否可用。以下是如何实现用户名可用性检查的UI：

<!-- 用户名字段的不同状态 -->

<!-- 正在检查状态 -->
<div class="mb-4">
  <label for="username" class="block font-medium text-sm mb-2">
    Username
  </label>
  <div class="relative">
    <input type="text" name="username" id="username" autocomplete="username" value="github-user" 
      class="w-full px-3 py-2 border border-github-border rounded-github-md focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue pr-10" />
    <span class="absolute right-3 top-2.5">
      <svg class="animate-spin h-5 w-5 text-github-text-secondary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </span>
  </div>
  <p class="mt-1 text-xs text-github-text-secondary">
    Checking availability...
  </p>
</div>

<!-- 可用状态 -->
<div class="mb-4">
  <label for="username_available" class="block font-medium text-sm mb-2">
    Username
  </label>
  <div class="relative">
    <input type="text" name="username_available" id="username_available" value="awesome-dev" 
      class="w-full px-3 py-2 border border-github-green rounded-github-md focus:outline-none focus:border-github-green focus:ring-1 focus:ring-github-green pr-10" />
    <span class="absolute right-3 top-2.5 text-github-green">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
        <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
      </svg>
    </span>
  </div>
  <p class="mt-1 text-xs text-github-green">
    Username is available.
  </p>
</div>

<!-- 不可用状态 -->
<div class="mb-4">
  <label for="username_unavailable" class="block font-medium text-sm mb-2 text-github-red">
    Username
  </label>
  <div class="relative">
    <input type="text" name="username_unavailable" id="username_unavailable" value="octocat" 
      class="w-full px-3 py-2 border border-github-red rounded-github-md focus:outline-none focus:border-github-red focus:ring-1 focus:ring-github-red bg-github-red bg-opacity-5 pr-10" />
    <span class="absolute right-3 top-2.5 text-github-red">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
        <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
      </svg>
    </span>
  </div>
  <p class="mt-1 text-xs text-github-red">
    Username 'octocat' is not available.
  </p>
</div>

响应式设计考虑

GitHub的登录和注册页面在移动设备上表现良好。以下是一些响应式设计的调整：

移动设备适配

我们已经在上面的代码中实现了基本的响应式设计。对于小屏幕设备，可以进一步调整：

<!-- 更改主容器的最大宽度 -->
<div class="w-full max-w-[340px] sm:max-w-[320px] mx-auto">

<!-- 在移动设备上调整填充和间距 -->
<main class="flex-grow flex flex-col items-center justify-start py-6 sm:py-10 px-4">

<!-- 移动设备上调整页脚链接 -->
<footer class="py-6 sm:py-8 px-4">
  <div class="max-w-[340px] sm:max-w-[320px] mx-auto">
    <ul class="flex flex-wrap justify-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
      <!-- Footer links -->
    </ul>
  </div>
</footer>

深入表单样式

GitHub表单元素有一些特殊的样式和交互效果。让我们进一步完善表单元素的样式：

高质量输入框聚焦状态

<!-- 改进的输入框样式 -->
<input type="text" name="input_field" id="input_field" 
  class="w-full px-3 py-2 border border-github-border rounded-github-md 
  focus:outline-none focus:border-github-blue focus:ring-1 focus:ring-github-blue
  transition-colors duration-150" />

自定义复选框样式

<!-- 改进的复选框样式 -->
<label class="flex items-start">
  <input type="checkbox" name="custom_checkbox" id="custom_checkbox" 
    class="rounded text-github-blue focus:ring-github-blue focus:ring-offset-0
    border-github-border transition-colors duration-150" />
  <span class="ml-2 text-sm">
    Checkbox label text
  </span>
</label>

登录和注册页面的关键样式技术点

让我们总结一下实现GitHub登录和注册页面的关键样式技术点：

  1. 简洁的表单布局：GitHub使用垂直排列、一致的间距和清晰的层次结构，使表单易于理解和填写。

  2. 输入框焦点状态：当用户与表单字段交互时，GitHub使用蓝色边框和轻微的阴影效果来突出显示焦点状态。

  3. 辅助文本：GitHub在表单字段下方提供辅助文本，帮助用户理解字段要求或提供附加信息。

  4. 错误和成功状态：使用颜色和图标来提供清晰的视觉反馈，表明字段状态。

  5. 按钮样式：使用GitHub的绿色主按钮，带有微妙的阴影和悬停效果，引导用户完成主要操作。

  6. 响应式设计：表单在不同屏幕尺寸上保持可用性，调整间距和容器尺寸。

  7. 一致的色彩系统：使用GitHub的色彩系统来传达状态和重要性。

  8. 系统字体栈：使用系统字体以获得更好的性能和原生感觉。

常见问题与解决方案

问题1：复选框样式不一致

解决方案：Tailwind默认的复选框样式可能与GitHub不完全匹配。使用@tailwindcss/forms插件可以获得更一致的基础样式，然后通过自定义类进行调整：

<!-- 添加到tailwind.config.js -->
plugins: [
  require('@tailwindcss/forms')({
    strategy: 'class', // 仅应用于有class的元素
  }),
]

<!-- 然后在HTML中 -->
<input type="checkbox" class="form-checkbox rounded text-github-blue" />

问题2：字体渲染不一致

解决方案：确保使用正确的系统字体栈，并添加-webkit-font-smoothing和-moz-osx-font-smoothing属性：

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

问题3：按钮阴影效果不精确

解决方案：GitHub的按钮有一个微妙的内部高光和底部阴影。使用多层阴影可以更准确地复制这种效果：

<button class="shadow-[0_1px_0_rgba(27,31,36,0.04),inset_0_1px_0_rgba(255,255,255,0.25)] hover:shadow-[0_1px_0_rgba(27,31,36,0.1),inset_0_1px_0_rgba(255,255,255,0.03)]">
  Button Text
</button>

扩展与练习建议

  1. 基础练习：添加一个"忘记密码"页面，保持与登录和注册页面一致的设计风格。

  2. 中级练习：实现两步验证码页面，展示输入验证码的表单，以及切换到备用验证方法的选项。

  3. 高级练习：创建一个完整的注册流程，包括电子邮件验证步骤和初始设置向导页面。

  4. 挑战练习：实现GitHub的账户设置页面，包括多个表单部分（如个人资料、密码更改、SSH密钥等）。

  5. 样式练习：为登录和注册页面添加暗模式支持，确保所有元素在暗模式下保持良好的对比度和可读性。

总结

在本节中，我们成功复刻了GitHub的登录和注册页面，使用Tailwind CSS实现了精确的视觉效果和交互体验。我们学习了如何构建表单布局、样式化输入字段、添加验证状态反馈以及创建响应式设计。

GitHub的身份验证界面体现了其设计系统的核心原则：简洁、功能性和用户友好。通过关注细节，如输入状态、辅助文本和一致的间距，我们能够创建既美观又实用的表单界面。

在下一节中，我们将探索如何实现GitHub的用户主页，展示个人资料和活动流，并继续深入学习如何使用Tailwind CSS复制GitHub的界面设计。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布