Qwen3.8-27B NPU推理加速实战：从环境搭建到性能调优全记录
2026/9/30 5:02:37
做前端这些年，我越来越觉得登录页面是被低估的东西。面试作品、课程作业、个人项目、外包交付，几乎每一个Web项目都绕不开这个入口。而“好看实用”这四个字，往往比想象中难做到——既要能在几分钟内套用到自己项目里，又不能让用户一眼看上去就觉得廉价。这次我一次性整理六个风格不同、可以直接复用的HTML登录页面，从极简卡片到玻璃拟态，从暗色科技感到滑块验证，每个页面都有完整可运行的代码和设计思路拆解。无论你是刚学HTML的新手，还是经常需要写后台管理端的老手，这六个页面都能让你在改改文字和Logo之后，直接变成自己项目里的登录入口。
既然标题叫“好看实用”，那么光好看不行，必须实用；光实用也不行，还得让人看了觉得舒服。这六个页面的设计方案，是我在实际项目里反复调整后沉淀下来的，踩过的坑和优化细节我都会在下面说清楚。
1. 六个页面在设计上的整体思路拆解
1.1 为什么是六个而不是一个“万能模板”
有人可能会问：做一个通用的登录页面不就行了？非得搞六个？这种想法我一开始也有，但真正做项目之后发现，不同场景对登录页的诉求差异非常大。一个校园内部系统和一个面向C端用户的SaaS产品，登录页的气质完全不一样；一个后台管理平台和一个支付类应用，对安全感的表达也不一样。
我做这六个页面的分法是按照风格维度和功能维度交叉来的：
- 极简居中卡片式：适合大多数中后台系统、内部工具，也是我日常用得最多的款式。
- 左右分栏品牌展示式：适合需要同时承担品牌宣传入口的网站，比如官网、招商页面。
- 玻璃拟态风格：适合偏现代、偏娱乐化的产品，视觉冲击力强。
- 暗色科技感风格：适合工具类、开发者类、数据类产品，能强调“技术”属性。
- 带社交登录区的卡片式：适合移动端H5、内容型产品，需要在账号密码之外提供第三方登录入口。
- 带滑块验证的登录页：适合安全要求高、经常被刷接口的场景，能在前端先拦一道。
每一种方案都对应了不同的使用场景，这样你在选型的时候，直接对号入座就行，不用拿着一个模板反复改。
1.2 所有登录页都会用到的通用HTML结构
不管最终设计成什么风格，登录页面的HTML骨架其实高度一致。你只需要记住这个最基本的结构，剩下的都是往里面填充样式和交互：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录页面</title> <style> /* 样式写这里 */ </style> </head> <body> <div class="login-container"> <div class="login-card"> <h2>欢迎登录</h2> <form id="loginForm"> <div class="form-group"> <label for="username">账号</label> <input type="text" id="username" placeholder="请输入账号" autocomplete="username"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" id="password" placeholder="请输入密码" autocomplete="current-password"> </div> <button type="submit" class="login-btn">登 录</button> </form> </div> </div> </body> </html>很多新手容易忽略几个细节：meta里的viewport不写，手机端打开就直接缩放成一坨，页面完全没法看；input不写autocomplete，浏览器自带的密码保存功能就会抽风；button不写type="submit"，在表单外面点击的时候可能触发不了提交。这些细节虽然不直接影响“好看”，但直接影响“实用”。
1.3 样式方案的选型：纯CSS还是CSS+JS
我这次给的六个页面里，前五个用纯HTML+CSS就能跑得很漂亮，第六个滑块验证页需要一点JavaScript配合。有人可能会觉得“只有CSS才显得技术厉害”，其实不是这样。能用CSS解决的问题，就不要用JS，因为CSS的渲染效率更高、代码更利于维护、也不容易出现交互时序问题。
但是滑块验证这种交互，本质上需要监听鼠标和触摸事件，那就必须用JS。我见过有人硬要用纯CSS去做滑块拖动效果，搞了半天也只能做到点击跳转，模拟不了真实的拖拽验证，反而把简单的事情做复杂了。正确做法是：布局和视觉交给CSS，交互和状态管理交给JS，各干各擅长的活。
2. 六款登录页面的核心实现与代码详解
2.1 极简居中卡片式登录页
这版是我用得最多的方案，也是最适合当“底稿”的。整个页面用Flexbox让卡片在视口中水平垂直居中，背景用了一个低饱和度的渐变，卡片本身则是纯白底加上一圈轻阴影。它不挑行业、不挑产品，怎么换Logo都不违和。
核心代码如下：
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e8ecf1 0%, #f2f4f7 100%); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } .login-card { width: 380px; padding: 40px 32px; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }这里最核心的一步是box-sizing: border-box，不写这一条，padding会把卡片的实际宽度撑大，到了移动端就会超出屏幕。阴影用0 12px 32px rgba(0, 0, 0, 0.08)而不是#000纯黑色，是因为带透明度的阴影在浅色背景下更柔和，看起来更“高级”。
输入框的焦点效果是个很容易出彩的细节：
.form-group input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #d9dce3; border-radius: 8px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .form-group input:focus { border-color: #4a7cf6; box-shadow: 0 0 0 3px rgba(74, 124, 246, 0.15); }:focus状态用3px的淡蓝色光晕替代默认边框高亮，这是很多设计规范里的标准做法。光晕颜色是主边框色的半透明版本，视觉上既协调又不会刺眼。我给这个页面定的主色是#4a7cf6，属于冷静的蓝色系，商业项目里用这种颜色基本不会出错。
登录按钮的设置上，我习惯让它右侧略微“鼓”出来一点，用圆角和渐变色营造主按钮的感觉：
.login-btn { width: 100%; height: 46px; border: none; border-radius: 8px; background: linear-gradient(135deg, #4a7cf6, #6b5ef6); color: #fff; font-size: 16px; cursor: pointer; transition: transform 0.1s, opacity 0.2s; } .login-btn:hover { opacity: 0.9; } .login-btn:active { transform: scale(0.98); }2.2 左右分栏品牌展示式登录页
这版适合官网类项目，左边是品牌文案和背景装饰，右边是登录表单。它在视觉上比居中卡片更大气，同时又不会喧宾夺主，让用户登录的时候能感知到产品的调性。
实现上核心是布局分栏：
.login-wrapper { display: flex; min-height: 100vh; } .login-left { flex: 1.2; display: flex; flex-direction: column; justify-content: center; padding: 60px; background: linear-gradient(160deg, #1f2a44 0%, #2d3e66 100%); color: #ffffff; } .login-right { flex: 1; display: flex; align-items: center; justify-content: center; background: #ffffff; padding: 40px; }左栏的深色背景可以用background-image放一张实际的产品宣传图，再叠一层渐变遮罩保证文字可读性。用CSS实现渐变遮罩比PS做图省事得多，而且以后要换图只需要替换URL：
.login-left { background-image: linear-gradient(rgba(31, 42, 68, 0.85), rgba(45, 62, 102, 0.92)), url('../images/brand-bg.jpg'); background-size: cover; background-position: center; }这里有个容易被忽略的细节——两层背景的叠加顺序。linear-gradient(...)写在前面的那一层会渲染在上层，所以渐变是覆盖在图片上方的遮罩，不是背景。如果两个顺序写反，渐变就会变成被图片挡住，文字还是会看不清。
右栏表单区的宽度不要撑满整栏，建议限制在360px到400px之间，太宽会让用户觉得表单松散，太窄又显得小气。移动端适配相对简单，用一个media query在屏幕宽度小于768px时把左栏藏掉，只保留右栏，或者把两栏改成上下堆叠：
@media (max-width: 768px) { .login-wrapper { flex-direction: column; } .login-left { display: none; } .login-right { min-height: 100vh; padding: 24px; } }实际项目里“隐藏左栏”的处理方式非常常见，因为手机屏幕本身就小，品牌展示区域放太多内容反而干扰用户快速登录。
2.3 玻璃拟态风格登录页
玻璃拟态是前两年开始流行的设计风格，核心特征是毛玻璃效果、半透明面板、背后有鲜艳的渐变背景。这版页面放在娱乐类、社区类、ToC小工具类项目里都很好看。
实现毛玻璃效果有两个关键CSS属性：backdrop-filter: blur()和半透明背景色。注意backdrop-filter是对元素背后内容的模糊，而filter: blur()是模糊元素自身，这两个很容易混：
body { min-height: 100vh; background: linear-gradient(120deg, #f38b8b, #b96ab9, #5b7cfa); background-size: 200% 200%; animation: gradientMove 8s ease infinite; } .glass-card { width: 420px; padding: 44px 36px; border-radius: 16px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }这里有几个坑必须说。第一，backdrop-filter在部分旧版浏览器（比如某些Android WebView）里不支持，所以写的时候一定带上-webkit-backdrop-filter。第二，背景的渐变用background-size: 200% 200%并配合动画，才能让颜色流动起来；如果背景尺寸不放大，动画根本看不出位移。第三，玻璃卡片上的文字颜色不能用纯黑，要适度降低透明度，不然在模糊和透明叠加之后对比度会很怪。
输入框在这个风格里也有特殊处理，不能沿用普通的白底黑边，否则和玻璃质感会冲突。我用的是半透明白底加透明描边，文字用白或近白色：
.glass-card input { width: 100%; height: 46px; padding: 0 14px; background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; color: rgba(255, 255, 255, 0.95); outline: none; } .glass-card input::placeholder { color: rgba(255, 255, 255, 0.6); } .glass-card input:focus { border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.35); }输入框的placeholder颜色一定要单独设成半透明白，否则玻璃卡片上会出现默认灰灰的占位文字，很突兀。
2.4 暗色科技感登录页
暗色风格很适合那些拼技术实力的产品。这版页面我用了深色背景、霓虹色点缀和微光效按钮，整体像是深夜里的控制台界面。实现过程其实并不复杂，核心是让“发光”和“柔和”达到平衡，不要弄成花里胡哨的跑马灯。
暗色背景的底色不是纯黑，而是带有一些蓝色倾向的深灰蓝：
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0d1117; font-family: "JetBrains Mono", "Consolas", "Microsoft YaHei", monospace; } .dark-card { width: 400px; padding: 44px 36px; border-radius: 14px; background: #161b22; border: 1px solid #30363d; box-shadow: 0 0 60px rgba(0, 188, 245, 0.06); }输入框也跟随暗色风，使用深色底、细描边，并且聚焦时给出一圈内发光的边框：
.dark-card input { width: 100%; height: 46px; padding: 0 14px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #c9d1d9; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .dark-card input:focus { border-color: #00bcf5; box-shadow: 0 0 0 3px rgba(0, 188, 245, 0.15); }按钮的发光效果可以用box-shadow来模拟，但要注意发光强度不能太高，否则会像广告牌：
.dark-card .login-btn { width: 100%; height: 46px; border: none; border-radius: 8px; background: linear-gradient(90deg, #00bcf5, #0052d9); color: #fff; font-size: 15px; cursor: pointer; transition: box-shadow 0.2s, transform 0.1s; } .dark-card .login-btn:hover { box-shadow: 0 4px 24px rgba(0, 188, 245, 0.35); }暗色页面有一个容易被忽略的细节：不要在所有地方都用纯–白文字，而是用带灰度的浅色文字（比如#c9d1d9），这样长时间看不会刺眼，也更接近GitHub等成熟暗色产品的视觉效果。
2.5 带社交登录区的卡片式登录页
很多移动端H5或内容类平台，除了账号密码登录之外还要放微信、GitHub、手机验证码等第三方入口。这个页面我在原来的居中卡片结构上，加了一个“其他登录方式”的模块，使用图标按钮或者文字链接。
结构上分为上下两段：
<div class="login-card"> <h2>欢迎回来</h2> <form id="loginForm"> <div class="form-group"> <input type="text" placeholder="手机号 / 邮箱"> </div> <div class="form-group"> <input type="password" placeholder="密码"> </div> <div class="form-options"> <label><input type="checkbox"> 记住我</label> <a href="#">忘记密码？</a> </div> <button type="submit" class="login-btn">登 录</button> </form> <div class="divider"><span>或</span></div> <div class="social-login"> <button class="social-btn">微信登录</button> <button class="social-btn">GitHub登录</button> </div> </div>分割线的做法很常用，但新手容易写得很费劲。我用的是伪元素方案：
.divider { display: flex; align-items: center; margin: 24px 0 18px; color: #9098a3; font-size: 13px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #e4e7ed; } .divider span { padding: 0 12px; white-space: nowrap; }伪元素各自占据剩余空间，中间的“或”自然居中。这样就不需要额外的绝对定位，代码非常省事。
社交按钮的样式不建议用浏览器默认按钮，要给足内边距和圆角，让它们在视觉上比主登录按钮弱一档，但又能被轻松点中。颜色上尽量贴合品牌色，但不要直接用饱和度过高的原色，做一个70%左右的透明度或暗化处理，更耐看。
2.6 带滑块验证的登录页
滑块验证在现代Web里太常见了。虽然真正安全的验证动作通常由后端接口完成，但前端做好滑块交互依然是用户体验里的重要一环。这版的实现思路是：一个滑条容器，内部有一个可拖动的滑块，滑块拖到最右端时状态变成“验证通过”。
HTML结构大概长这样：
<div class="slider-box" id="sliderBox"> <div class="slider-bg" id="sliderBg"></div> <div class="slider-text">按住滑块，拖动到最右边</div> <div class="slider-btn" id="sliderBtn">></div> </div>JS核心逻辑是监听鼠标和触摸事件，计算滑块位移，并在松手时判断是否到达终点：
const sliderBox = document.getElementById('sliderBox'); const sliderBtn = document.getElementById('sliderBtn'); const sliderBg = document.getElementById('sliderBg'); let isDragging = false; let startX = 0; let currentX = 0; const triggerOffset = sliderBox.clientWidth - sliderBtn.clientWidth - 8; sliderBtn.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; sliderBtn.style.transition = 'none'; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const diff = e.clientX - startX; currentX = Math.max(0, Math.min(diff, triggerOffset)); sliderBtn.style.transform = `translateX(${currentX}px)`; sliderBg.style.width = `${currentX + sliderBtn.clientWidth}px`; }); document.addEventListener('mouseup', () => { if (!isDragging) return; isDragging = false; if (currentX >= triggerOffset - 5) { sliderBtn.style.transform = `translateX(${triggerOffset}px)`; sliderBg.style.width = `${triggerOffset + sliderBtn.clientWidth}px`; sliderBg.style.background = '#67c23a'; sliderBox.querySelector('.slider-text').textContent = '验证通过'; } else { sliderBtn.style.transition = 'transform 0.3s ease'; sliderBtn.style.transform = 'translateX(0)'; sliderBg.style.transition = 'width 0.3s ease'; sliderBg.style.width = '0'; setTimeout(() => { sliderBtn.style.transition = 'none'; sliderBg.style.transition = 'none'; }, 350); } });这段代码里有几个值得注意的点：
- 鼠标事件绑定在
document上，而不是滑块按钮本身，是为了拖动过程中鼠标移出按钮范围时依然能跟踪移动和松开。很多人只绑了按钮自身的mousemove，拖快了就飞出去。 - 位移范围通过
Math.max(0, Math.min(diff, triggerOffset))做上下限钳制，防止滑块拖出滑条。 - 判断通过时用
currentX >= triggerOffset - 5，留5像素容错，否则手一抖差一点点就过不去，体验会糟糕。 - 失败动画结束后要清掉
transition，否则下一次拖动时滑块复位会有延迟回弹的问题。
如果您还需要兼容手机端，只需再补一组touchstart、touchmove、touchend，逻辑与鼠标事件一致，但要注意touchmove里需要e.preventDefault()，否则页面会跟随手指滚动。
3. 登录页面的通用交互细节与表单验证
3.1 前端表单验证的几种常见写法
登录页可以没有复杂的后台逻辑，但前端验证不能少。最朴素的写法是HTML5自带的required、type="email"等属性，但它的默认提示样式在不同浏览器里长得不一样，而且没法完全控制。稍微复杂一点的场景我会用JavaScript在提交时统一校验。
这里提供一个轻量级的校验示例，逻辑是：空表单提示“请填写账号/密码”，邮箱格式不对时提示“邮箱格式不正确”，密码短于6位时提示“密码至少6位”：
loginForm.addEventListener('submit', (e) => { e.preventDefault(); const username = document.getElementById('username').value.trim(); const password = document.getElementById('password').value.trim(); if (!username) { alert('请填写账号'); return; } if (!password) { alert('请填写密码'); return; } if (password.length < 6) { alert('密码至少需要6位'); return; } // 校验通过后模拟提交 alert('登录成功'); });实际项目中不建议用alert做提示，最好是在输入框下方显示一行红色的错误消息，或者把输入框的边框变成红色，并弹出一条柔和的小提示。但为了演示简单，这里先用alert保住核心逻辑，具体改成哪种展示形式可以根据自身的UI风格来，不影响主干。
3.2 密码可见性切换
密码框右边那个小眼睛图标，是登录页使用频率非常高的交互。实现方式不复杂，核心是切换input的type属性：
const pwdInput = document.getElementById('password'); const toggleBtn = document.getElementById('togglePwd'); toggleBtn.addEventListener('click', () => { const isPassword = pwdInput.type === 'password'; pwdInput.type = isPassword ? 'text' : 'password'; toggleBtn.textContent = isPassword ? '隐藏' : '显示'; });一个容易被忽略的细节是：切换成明文后，输入框的焦点会丢失，用户体验有点断档。解决方法是每次切完都把焦点放回输入框，并且让光标位置保持在末尾：
toggleBtn.addEventListener('click', () => { const end = pwdInput.value.length; pwdInput.type = pwdInput.type === 'password' ? 'text' : 'password'; pwdInput.focus(); pwdInput.setSelectionRange(end, end); });这一小步能让交互手感提升一个档次，强烈建议写上。
3.3 回车提交和键盘体验
默认情况下，表单里的input按下回车就会提交form，这是浏览器原生行为，但有几个细节可以优化：
input的enterkeyhint属性可以控制移动端键盘右下角按钮的文字，比如enterkeyhint="go"显示“前往”，enterkeyhint="done"显示“完成”。这个属性对移动端体验帮助很大，尤其H5项目一定要加。- 当只有一个密码框时，回车提交没有问题；但像“验证码 + 密码”这种多字段场景，建议给所有
input绑定keydown事件监听回车，然后手动聚焦到下一个输入框或触发提交。
代码示例：
document.querySelectorAll('input').forEach((input, index, arr) => { input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); if (index < arr.length - 1) { arr[index + 1].focus(); } else { document.getElementById('loginForm').requestSubmit(); } } }); });e.preventDefault()必须写，不然浏览器可能会触发表单默认的提交行为，导致页面刷新。
3.4 登录按钮的状态反馈
我见过很多页面点击登录之后没有任何反馈，用户不知道到底有没有提交成功，这是很差的体验。最简单的办法是给按钮做一个“加载中”的状态：点击后把按钮文字改成“登录中...”，并禁用按钮防止重复提交，等后端返回后再恢复。
function setLoading(isLoading) { const btn = document.getElementById('loginBtn'); if (isLoading) { btn.disabled = true; btn.textContent = '登录中...'; } else { btn.disabled = false; btn.textContent = '登 录'; } }实际对接后端时，在fetch请求发出之前调用setLoading(true)，在finally里调用setLoading(false)，这样能覆盖请求成功和失败的两种情况，不会出现按钮一直卡在“登录中”的状态。
4. 响应式适配、浏览器兼容与代码组织
4.1 移动端适配的几招
六个页面的适配思路大同小异，核心是两件事：一是控制卡片宽度，二是调整间距和字号。
卡片宽度上，桌面端可以用width: 380px或width: 420px定宽，但移动端一定要改成百分比宽度加最大宽度限制：
.login-card { width: 92%; max-width: 420px; margin: 0 auto; padding: 32px 20px; }这样无论屏幕多窄，卡片都不会贴边，也不会因为固定宽度导致横向滚动。表单控件的字号在移动端建议不低于16px，否则iOS会在输入时自动放大页面。这是很多移动端网页的经典兼容问题，必须靠字号约束来规避。
间距方面，可以在小屏幕上统一调小卡片的padding和标题的margin，让表单更紧凑：
@media (max-width: 480px) { .login-card { padding: 24px 16px; border-radius: 10px; } h2 { font-size: 22px; margin-bottom: 22px; } }4.2 浏览器兼容的几个注意点
每个页面写完后我建议至少用Chrome、Safari、Firefox三款浏览器过一遍，重点检查三个点：
backdrop-filter在旧版Safari里要写-webkit-前缀，否则玻璃拟态页在iPhone上就是一块透明无毛玻璃的普通白板。box-shadow和border-radius在低版本浏览器里的表现差异主要不大，但transition: transform在部分浏览器上需要加前缀，为了保险可以补上-webkit-transition。flex布局在IE11里的兼容问题很多，比如flex: 1.2这种比例写法在IE里会解析异常。如果必须兼容IE，建议用固定百分比宽度替代；如果不需要兼容IE，那这些现代写法可以直接用。
这个判断逻辑给大家一个参考：如果项目有明确的IE老用户，那就用百分比布局；如果只给现代浏览器用，放心上Flex和Grid。
4.3 六个代码文件的组织方式
我建议把这六个页面当作独立的index.html放在不同目录里。每个目录下面可以留出css/和js/两个子目录，方便后续维护。实际开发中，登录页往往不是单独存在的，而是要嵌入到后端模板里，比如Java的Thymeleaf、Python的Jinja2等。这时候只要把<style>区块抽成单独的login.css，把<script>区块抽成login.js，再放到模板引擎的静态资源目录就行。
如果你只是用来学习，那所有代码都塞在一个index.html里反而更方便，浏览器双击就能打开，不需要起本地服务。等真到了项目复用时，再按标准结构拆分也不迟。
5. 常见问题与排查技巧实录
5.1 登录按钮点击无反应
这是最常见的问题。排查顺序一般是：先按F12打开控制台看有没有红叉报错，再看JS有没有被阻断加载，最后确认button的type是不是submit。
很多新手会把<button>写成<button onclick="login()">，然后login()函数定义在另一个外部JS里，结果文件路径写错或者加载顺序不对，函数找不到，点击自然没反应。调试方法很简单：在login()第一行加一个console.log('click')，如果点击后控制台没输出，说明函数压根没有绑定成功。
5.2 样式被浏览器默认样式覆盖
浏览器对body、input、button都有默认样式。最容易出问题的是input的默认边框和button的默认背景在个别浏览器里去不掉。解决办法是每个页面开头都写一段极简的reset：
* { margin: 0; padding: 0; box-sizing: border-box; } input, button { border: none; outline: none; background: none; }当然，如果要兼容更多场景，可以直接用成熟的reset库，比如normalize.css。但如果只是做登录页，自己写上面这几行就够了，没必要引一个动辄几十KB的库进来。
5.3 背景图失效或者错位
左右分栏页面里背景图不显示，十有八九是路径写错了。我习惯把图片放在和HTML同级的images目录下，然后写相对路径。注意区分background-image: url('images/bg.jpg')和url('../images/bg.jpg')的区别，前者是HTML同级目录下的images文件夹，后者是上一级目录下的images文件夹，搞错一级就白屏。
另外一个常见问题是背景图加载出来了但被拉伸变形。background-size: cover会等比缩放并裁剪，不会变形；但如果你用了background-size: 100% 100%，它会把图片强行拉升填满容器，图片有大比例变形风险。所以这里我强烈建议：装饰性背景统一用cover，不要用100% 100%。
5.4 手机端输入框被自动放大
iOS Safari在输入框字号小于16px时会自动放大页面，用来帮助用户看清文字，但对整体布局来说是灾难。解决办法有两个：
第一种是在head里加入maximum-scale=1，让页面禁止手动缩放。但这种方式会影响无障碍访问，很多场景下不建议无脑加。
第二种是把输入框的字号设置为16px或者更大。这样既不会触发iOS的自动放大，也不用牺牲用户的双指缩放权限，是最推荐的方案。我在这六个页面里，所有输入框字号都控制在16px。
5.5 滑块验证拖不动或拖一半飞走
滑块拖不动，通常是mousedown事件里没有阻止默认行为，或者按钮上方还有别的元素盖住了它。检查方式同样是控制台看事件有没有触发。拖一半飞走，通常是mousemove绑定在了按钮本身上，鼠标移出按钮范围后就收不到事件了，所以要把mousemove和mouseup都绑在document上，用全局事件去跟踪。
另外触摸端还要注意touchmove里要加e.preventDefault()，否则页面滚动会抢走事件，滑块移动就会断断续续。
5.6 各个浏览器看起来效果不一致
这个问题我会在交付前统一处理。做法很简单：每一款页面都先做“结构层”，确认所有元件的HTML结构都完整；再做“表现层”，确认字体、颜色、间距、圆角这些视觉参数；最后做“交互层”，把JS的焦点、事件等都检查一遍。每做完一个层面，就在目标浏览器上刷新一次。
如果发现某个样式在特定浏览器上表现不一致，优先考虑是否缺少厂商前缀，然后去查对应属性的兼容性。一个小技巧是：在CSS里把不兼容的属性放在最后一行写标准语法，前面补上带前缀的写法，这样不支持的浏览器会跳过，支持标准语法的浏览器按标准语法渲染，双保险。
写在最后
这六个登录页面我断断续续写了快两年时间，几乎每做一个新项目就会回来微调一次。做前端越久越会觉得，登录页面不是一个简单的表单，它是产品和用户建立连接的第一个触点，很多时候用户对系统的第一印象就来自这个页面。一个页面的质量，不光是看它在桌面Chrome里有多精致，更要看它在老旧浏览器、手机端、弱网环境下能不能保持稳定和友好。比如那款玻璃拟态页，在某些低配手机上毛玻璃会很吃性能，这种情况我就会考虑把backdrop-filter换成纯色半透明加轻微噪点，效果接近但性能好很多。
如果你是拿来应付课程作业，直接把代码复制下来改改文案和Logo就能用；如果你是拿去接外包项目，我建议在提交前做两件事：一是把写死的前端校验补上真实接口对接，二是把滑块验证的通过状态与后端二次校验衔接起来。前者能让你交付的东西真正可用，后者能避免别人只改一下前端代码就绕过验证，安全底线上也有交代。
最后再分享一个小技巧：把第一个极简卡片式页面的配色换成自己项目的品牌色，把分割线和圆角微调一下，它几乎能适配所有中后台项目的登录需求。其他五款页面更像是为特定产品形态定制的风格方案，按需取用就好。希望这六个页面能让你少走点弯路，也期待看到你改出来的更好版本。