学习目标

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

GitHub登录与注册页面分析

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

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

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

登录页面实现

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

页面结构拆解

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

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

步骤1：创建基本HTML结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Sign in to GitHub · GitHub</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <script>
  9.     tailwind.config = {
  10.       theme: {
  11.         extend: {
  12.           colors: {
  13.             "github-blue": "#0969da",
  14.             "github-green": "#2da44e",
  15.             "github-red": "#cf222e",
  16.             "github-yellow": "#bf8700",
  17.             "github-purple": "#8250df",
  18.             "github-bg": "#f6f8fa",
  19.             "github-border": "#d0d7de",
  20.             "github-text-primary": "#24292f",
  21.             "github-text-secondary": "#57606a",
  22.             "github-header-bg": "#24292f",
  23.             "github-header-text": "#ffffff",
  24.             "github-btn-primary": "#2da44e",
  25.             "github-btn-primary-hover": "#2c974b",
  26.           },
  27.           fontFamily: {
  28.             "github": [
  29.               "-apple-system", 
  30.               "BlinkMacSystemFont", 
  31.               "Segoe UI", 
  32.               "Noto Sans", 
  33.               "Helvetica", 
  34.               "Arial", 
  35.               "sans-serif", 
  36.               "Apple Color Emoji", 
  37.               "Segoe UI Emoji"
  38.             ],
  39.           },
  40.           borderRadius: {
  41.             "github-md": "6px",
  42.           },
  43.           boxShadow: {
  44.             "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
  45.             "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
  46.           }
  47.         }
  48.       }
  49.     }
  50.   </script>
  51. </head>
  52. <body class="bg-white font-github text-github-text-primary">
  53.   <div class="min-h-screen flex flex-col">
  54.     <!-- 内容将在这里添加 -->
  55.   </div>
  56. </body>
  57. </html>

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

  1. <div class="min-h-screen flex flex-col">
  2.   <!-- Header -->
  3.   <header class="w-full py-6 flex justify-center">
  4.     <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">
  5.       <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>
  6.     </svg>
  7.   </header>
  9.   <!-- Main Content -->
  10.   <main class="flex-grow flex flex-col items-center justify-start py-10 px-4">
  11.     <!-- Sign-in container -->
  12.     <div class="w-full max-w-[340px] mx-auto">
  13.       <h1 class="text-2xl font-semibold text-center mb-4">Sign in to GitHub</h1>
  15.       <!-- Login type selection -->
  16.       <div class="mb-4 bg-white border border-github-border rounded-github-md overflow-hidden">
  17.         <div class="flex">
  18.           <button class="flex-1 py-4 px-2 text-center bg-white border-b-2 border-github-blue text-github-blue font-semibold">
  19.             Sign in with GitHub.com
  20.           </button>
  21.           <button class="flex-1 py-4 px-2 text-center text-github-text-secondary">
  22.             Sign in with Enterprise
  23.           </button>
  24.         </div>
  25.       </div>
  26.     </div>
  27.   </main>
  28. </div>

步骤3：构建登录表单

  1. <!-- 在Sign-in container内，login type selection后添加 -->
  2. <!-- Login form -->
  3. <div class="w-full border border-github-border rounded-github-md bg-white p-4 mt-4">
  4.   <form>
  5.     <!-- Username field -->
  6.     <div class="mb-4">
  7.       <label for="login_field" class="block font-medium text-sm mb-2">
  8.         Username or email address
  9.       </label>
  10.       <input type="text" name="login" id="login_field" autocomplete="username" 
  11.         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" />
  12.     </div>
  14.     <!-- Password field with "Forgot password" link -->
  15.     <div class="mb-4">
  16.       <div class="flex justify-between items-center mb-2">
  17.         <label for="password" class="block font-medium text-sm">
  18.           Password
  19.         </label>
  20.         <a href="#" class="text-github-blue text-xs hover:underline">
  21.           Forgot password?
  22.         </a>
  23.       </div>
  24.       <input type="password" name="password" id="password" autocomplete="current-password" 
  25.         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" />
  26.     </div>
  28.     <!-- Sign in button -->
  29.     <button type="submit" 
  30.       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">
  31.       Sign in
  32.     </button>
  33.   </form>
  34. </div>

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

  1. <!-- 在login form内，Sign in button前添加 -->
  2. <!-- Remember me checkbox -->
  3. <div class="mb-4">
  4.   <label class="flex items-center">
  5.     <input type="checkbox" name="remember_me" id="remember_me" 
  6.       class="rounded text-github-blue focus:ring-github-blue" />
  7.     <span class="ml-2 text-sm">Keep me signed in</span>
  8.   </label>
  9. </div>
  11. <!-- 在login form容器后添加 -->
  12. <!-- Create account CTA -->
  13. <div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
  14.   <p class="text-sm">
  15.     New to GitHub? 
  16.     <a href="#" class="text-github-blue hover:underline">Create an account</a>.
  17.   </p>
  18. </div>

步骤5：添加页脚区域

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

完整的登录页面代码

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Sign in to GitHub · GitHub</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <script>
  9.     tailwind.config = {
  10.       theme: {
  11.         extend: {
  12.           colors: {
  13.             "github-blue": "#0969da",
  14.             "github-green": "#2da44e",
  15.             "github-red": "#cf222e",
  16.             "github-yellow": "#bf8700",
  17.             "github-purple": "#8250df",
  18.             "github-bg": "#f6f8fa",
  19.             "github-border": "#d0d7de",
  20.             "github-text-primary": "#24292f",
  21.             "github-text-secondary": "#57606a",
  22.             "github-header-bg": "#24292f",
  23.             "github-header-text": "#ffffff",
  24.             "github-btn-primary": "#2da44e",
  25.             "github-btn-primary-hover": "#2c974b",
  26.           },
  27.           fontFamily: {
  28.             "github": [
  29.               "-apple-system", 
  30.               "BlinkMacSystemFont", 
  31.               "Segoe UI", 
  32.               "Noto Sans", 
  33.               "Helvetica", 
  34.               "Arial", 
  35.               "sans-serif", 
  36.               "Apple Color Emoji", 
  37.               "Segoe UI Emoji"
  38.             ],
  39.           },
  40.           borderRadius: {
  41.             "github-md": "6px",
  42.           },
  43.           boxShadow: {
  44.             "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
  45.             "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
  46.           }
  47.         }
  48.       }
  49.     }
  50.   </script>
  51. </head>
  52. <body class="bg-white font-github text-github-text-primary">
  53.   <div class="min-h-screen flex flex-col">
  54.     <!-- Header -->
  55.     <header class="w-full py-6 flex justify-center">
  56.       <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">
  57.         <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>
  58.       </svg>
  59.     </header>
  61.     <!-- Main Content -->
  62.     <main class="flex-grow flex flex-col items-center justify-start py-10 px-4">
  63.       <!-- Sign-in container -->
  64.       <div class="w-full max-w-[340px] mx-auto">
  65.         <h1 class="text-2xl font-semibold text-center mb-4">Sign in to GitHub</h1>
  67.         <!-- Login type selection -->
  68.         <div class="mb-4 bg-white border border-github-border rounded-github-md overflow-hidden">
  69.           <div class="flex">
  70.             <button class="flex-1 py-4 px-2 text-center bg-white border-b-2 border-github-blue text-github-blue font-semibold">
  71.               Sign in with GitHub.com
  72.             </button>
  73.             <button class="flex-1 py-4 px-2 text-center text-github-text-secondary">
  74.               Sign in with Enterprise
  75.             </button>
  76.           </div>
  77.         </div>
  79.         <!-- Login form -->
  80.         <div class="w-full border border-github-border rounded-github-md bg-white p-4 mt-4">
  81.           <form>
  82.             <!-- Username field -->
  83.             <div class="mb-4">
  84.               <label for="login_field" class="block font-medium text-sm mb-2">
  85.                 Username or email address
  86.               </label>
  87.               <input type="text" name="login" id="login_field" autocomplete="username" 
  88.                 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" />
  89.             </div>
  91.             <!-- Password field with "Forgot password" link -->
  92.             <div class="mb-4">
  93.               <div class="flex justify-between items-center mb-2">
  94.                 <label for="password" class="block font-medium text-sm">
  95.                   Password
  96.                 </label>
  97.                 <a href="#" class="text-github-blue text-xs hover:underline">
  98.                   Forgot password?
  99.                 </a>
  100.               </div>
  101.               <input type="password" name="password" id="password" autocomplete="current-password" 
  102.                 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" />
  103.             </div>
  105.             <!-- Remember me checkbox -->
  106.             <div class="mb-4">
  107.               <label class="flex items-center">
  108.                 <input type="checkbox" name="remember_me" id="remember_me" 
  109.                   class="rounded text-github-blue focus:ring-github-blue" />
  110.                 <span class="ml-2 text-sm">Keep me signed in</span>
  111.               </label>
  112.             </div>
  114.             <!-- Sign in button -->
  115.             <button type="submit" 
  116.               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">
  117.               Sign in
  118.             </button>
  119.           </form>
  120.         </div>
  122.         <!-- Create account CTA -->
  123.         <div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
  124.           <p class="text-sm">
  125.             New to GitHub? 
  126.             <a href="#" class="text-github-blue hover:underline">Create an account</a>.
  127.           </p>
  128.         </div>
  129.       </div>
  130.     </main>
  132.     <!-- Footer -->
  133.     <footer class="py-8 px-4">
  134.       <div class="max-w-[340px] mx-auto">
  135.         <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
  136.           <li><a href="#" class="hover:text-github-blue hover:underline">Terms</a></li>
  137.           <li><a href="#" class="hover:text-github-blue hover:underline">Privacy</a></li>
  138.           <li><a href="#" class="hover:text-github-blue hover:underline">Docs</a></li>
  139.           <li><a href="#" class="hover:text-github-blue hover:underline">Contact GitHub Support</a></li>
  140.           <li><a href="#" class="hover:text-github-blue hover:underline">Manage cookies</a></li>
  141.           <li><a href="#" class="hover:text-github-blue hover:underline">Do not share my personal information</a></li>
  142.         </ul>
  143.       </div>
  144.     </footer>
  145.   </div>
  146. </body>
  147. </html>

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

表单验证状态

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

错误状态样式

  1. <!-- 错误状态的输入字段示例 -->
  2. <div class="mb-4">
  3.   <label for="username_error" class="block font-medium text-sm mb-2 text-github-red">
  4.     Username or email address
  5.   </label>
  6.   <input type="text" id="username_error" value="" 
  7.     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" />
  8.   <p class="mt-2 text-sm text-github-red">Incorrect username or password.</p>
  9. </div>

成功状态样式

  1. <!-- 成功状态的输入字段示例 -->
  2. <div class="mb-4">
  3.   <label for="username_success" class="block font-medium text-sm mb-2">
  4.     Username or email address
  5.   </label>
  6.   <input type="text" id="username_success" value="example@github.com" 
  7.     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" />
  8. </div>

注册页面实现

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

注册页面结构拆解

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

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

完整的注册页面代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Join GitHub · GitHub</title>
  7.   <script src="https://cdn.tailwindcss.com"></script>
  8.   <script>
  9.     tailwind.config = {
  10.       theme: {
  11.         extend: {
  12.           colors: {
  13.             "github-blue": "#0969da",
  14.             "github-green": "#2da44e",
  15.             "github-red": "#cf222e",
  16.             "github-yellow": "#bf8700",
  17.             "github-purple": "#8250df",
  18.             "github-bg": "#f6f8fa",
  19.             "github-border": "#d0d7de",
  20.             "github-text-primary": "#24292f",
  21.             "github-text-secondary": "#57606a",
  22.             "github-btn-primary": "#2da44e",
  23.             "github-btn-primary-hover": "#2c974b",
  24.           },
  25.           fontFamily: {
  26.             "github": [
  27.               "-apple-system", 
  28.               "BlinkMacSystemFont", 
  29.               "Segoe UI", 
  30.               "Noto Sans", 
  31.               "Helvetica", 
  32.               "Arial", 
  33.               "sans-serif", 
  34.               "Apple Color Emoji", 
  35.               "Segoe UI Emoji"
  36.             ],
  37.           },
  38.           borderRadius: {
  39.             "github-md": "6px",
  40.           },
  41.           boxShadow: {
  42.             "github-sm": "0 1px 0 rgba(27, 31, 36, 0.04)",
  43.             "github-btn": "0 1px 0 rgba(27, 31, 36, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25)",
  44.           }
  45.         }
  46.       }
  47.     }
  48.   </script>
  49. </head>
  50. <body class="bg-white font-github text-github-text-primary">
  51.   <div class="min-h-screen flex flex-col">
  52.     <!-- Header -->
  53.     <header class="w-full py-6 flex justify-center">
  54.       <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">
  55.         <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>
  56.       </svg>
  57.     </header>
  59.     <!-- Main Content -->
  60.     <main class="flex-grow flex flex-col items-center justify-start py-8 px-4">
  61.       <!-- Sign-up container -->
  62.       <div class="w-full max-w-[320px] mx-auto">
  63.         <h1 class="text-2xl font-semibold text-center mb-2">Welcome to GitHub!</h1>
  64.         <p class="text-github-text-secondary text-center mb-6">Let's begin the adventure</p>
  66.         <!-- Registration form -->
  67.         <div class="w-full bg-white">
  68.           <form>
  69.             <!-- Email field -->
  70.             <div class="mb-4">
  71.               <label for="email" class="block font-medium text-sm mb-2">
  72.                 Email address
  73.               </label>
  74.               <input type="email" name="email" id="email" autocomplete="email" 
  75.                 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" />
  76.             </div>
  78.             <!-- Password field -->
  79.             <div class="mb-4">
  80.               <label for="password" class="block font-medium text-sm mb-2">
  81.                 Password
  82.               </label>
  83.               <input type="password" name="password" id="password" autocomplete="new-password" 
  84.                 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" />
  85.               <p class="mt-1 text-xs text-github-text-secondary">
  86.                 Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter.
  87.               </p>
  88.             </div>
  90.             <!-- Username field -->
  91.             <div class="mb-4">
  92.               <label for="username" class="block font-medium text-sm mb-2">
  93.                 Username
  94.               </label>
  95.               <input type="text" name="username" id="username" autocomplete="username" 
  96.                 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" />
  97.               <p class="mt-1 text-xs text-github-text-secondary">
  98.                 Your username will be public and can be changed later.
  99.               </p>
  100.             </div>
  102.             <!-- Email preferences -->
  103.             <div class="mb-4">
  104.               <label class="block font-medium text-sm mb-2">
  105.                 Email preferences
  106.               </label>
  107.               <label class="flex items-start">
  108.                 <input type="checkbox" name="email_marketing" id="email_marketing" 
  109.                   class="rounded text-github-blue focus:ring-github-blue mt-1" />
  110.                 <span class="ml-2 text-xs text-github-text-secondary">
  111.                   I would like to receive product updates, announcements, and offers from GitHub via email.
  112.                 </span>
  113.               </label>
  114.             </div>
  116.             <!-- Terms acceptance -->
  117.             <div class="mb-6">
  118.               <p class="text-xs text-github-text-secondary mb-2">
  119.                 By creating an account, you agree to the 
  120.                 <a href="#" class="text-github-blue hover:underline">Terms of Service</a>. 
  121.                 For more information about GitHub's privacy practices, see the 
  122.                 <a href="#" class="text-github-blue hover:underline">GitHub Privacy Statement</a>. 
  123.                 We'll occasionally send you account-related emails.
  124.               </p>
  125.             </div>
  127.             <!-- Submit button -->
  128.             <button type="submit" 
  129.               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">
  130.               Create account
  131.             </button>
  132.           </form>
  133.         </div>
  135.         <!-- Sign-in link -->
  136.         <div class="mt-6 p-4 text-center border border-github-border rounded-github-md bg-github-bg">
  137.           <p class="text-sm">
  138.             Already have an account? 
  139.             <a href="#" class="text-github-blue hover:underline">Sign in</a>.
  140.           </p>
  141.         </div>
  142.       </div>
  143.     </main>
  145.     <!-- Footer -->
  146.     <footer class="py-8 px-4">
  147.       <div class="max-w-[320px] mx-auto">
  148.         <ul class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-github-text-secondary mb-4">
  149.           <li><a href="#" class="hover:text-github-blue hover:underline">Terms</a></li>
  150.           <li><a href="#" class="hover:text-github-blue hover:underline">Privacy</a></li>
  151.           <li><a href="#" class="hover:text-github-blue hover:underline">Security</a></li>
  152.           <li><a href="#" class="hover:text-github-blue hover:underline">Contact GitHub</a></li>
  153.         </ul>
  154.       </div>
  155.     </footer>
  156.   </div>
  157. </body>
  158. </html>

表单验证增强

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

密码强度指示器

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

  1. <!-- 替换原密码字段为以下内容 -->
  2. <div class="mb-4">
  3.   <label for="password" class="block font-medium text-sm mb-2">
  4.     Password
  5.   </label>
  6.   <input type="password" name="password" id="password" autocomplete="new-password" 
  7.     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" />
  9.   <!-- 密码强度指示器 -->
  10.   <div class="mt-2">
  11.     <div class="w-full h-1 flex gap-1">
  12.       <div class="flex-grow h-full bg-github-red bg-opacity-30 rounded-full"></div>
  13.       <div class="flex-grow h-full bg-github-yellow bg-opacity-30 rounded-full"></div>
  14.       <div class="flex-grow h-full bg-github-green bg-opacity-30 rounded-full"></div>
  15.     </div>
  17.     <div class="flex items-start gap-2 mt-2">
  18.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="fill-github-red">
  19.         <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
  20.         <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>
  21.       </svg>
  22.       <p class="text-xs text-github-text-secondary">
  23.         Password requirements:
  24.         <ul class="mt-1 pl-4 list-disc text-xs">
  25.           <li>At least 8 characters</li>
  26.           <li>At least one number</li>
  27.           <li>At least one lowercase letter</li>
  28.         </ul>
  29.       </p>
  30.     </div>
  31.   </div>
  32. </div>

用户名可用性检查

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

  1. <!-- 用户名字段的不同状态 -->
  3. <!-- 正在检查状态 -->
  4. <div class="mb-4">
  5.   <label for="username" class="block font-medium text-sm mb-2">
  6.     Username
  7.   </label>
  8.   <div class="relative">
  9.     <input type="text" name="username" id="username" autocomplete="username" value="github-user" 
  10.       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" />
  11.     <span class="absolute right-3 top-2.5">
  12.       <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">
  13.         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  14.         <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>
  15.       </svg>
  16.     </span>
  17.   </div>
  18.   <p class="mt-1 text-xs text-github-text-secondary">
  19.     Checking availability...
  20.   </p>
  21. </div>
  23. <!-- 可用状态 -->
  24. <div class="mb-4">
  25.   <label for="username_available" class="block font-medium text-sm mb-2">
  26.     Username
  27.   </label>
  28.   <div class="relative">
  29.     <input type="text" name="username_available" id="username_available" value="awesome-dev" 
  30.       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" />
  31.     <span class="absolute right-3 top-2.5 text-github-green">
  32.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
  33.         <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>
  34.       </svg>
  35.     </span>
  36.   </div>
  37.   <p class="mt-1 text-xs text-github-green">
  38.     Username is available.
  39.   </p>
  40. </div>
  42. <!-- 不可用状态 -->
  43. <div class="mb-4">
  44.   <label for="username_unavailable" class="block font-medium text-sm mb-2 text-github-red">
  45.     Username
  46.   </label>
  47.   <div class="relative">
  48.     <input type="text" name="username_unavailable" id="username_unavailable" value="octocat" 
  49.       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" />
  50.     <span class="absolute right-3 top-2.5 text-github-red">
  51.       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
  52.         <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>
  53.       </svg>
  54.     </span>
  55.   </div>
  56.   <p class="mt-1 text-xs text-github-red">
  57.     Username 'octocat' is not available.
  58.   </p>
  59. </div>

响应式设计考虑

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

移动设备适配

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

  1. <!-- 更改主容器的最大宽度 -->
  2. <div class="w-full max-w-[340px] sm:max-w-[320px] mx-auto">
  4. <!-- 在移动设备上调整填充和间距 -->
  5. <main class="flex-grow flex flex-col items-center justify-start py-6 sm:py-10 px-4">
  7. <!-- 移动设备上调整页脚链接 -->
  8. <footer class="py-6 sm:py-8 px-4">
  9.   <div class="max-w-[340px] sm:max-w-[320px] mx-auto">
  10.     <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">
  11.       <!-- Footer links -->
  12.     </ul>
  13.   </div>
  14. </footer>

深入表单样式

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

高质量输入框聚焦状态

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

自定义复选框样式

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

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

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

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

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

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

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

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

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

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

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

常见问题与解决方案

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

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

  1. <!-- 添加到tailwind.config.js -->
  2. plugins: [
  3.   require('@tailwindcss/forms')({
  4.     strategy: 'class', // 仅应用于有class的元素
  5.   }),
  6. ]
  8. <!-- 然后在HTML中 -->
  9. <input type="checkbox" class="form-checkbox rounded text-github-blue" />

问题2：字体渲染不一致

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

  1. body {
  2.   -webkit-font-smoothing: antialiased;
  3.   -moz-osx-font-smoothing: grayscale;
  4. }

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

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

  1. <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)]">
  2.   Button Text
  3. </button>

扩展与练习建议

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

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

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

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

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

总结

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

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

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