简介：这是一份收录了十四种主流视觉风格的网站登录页面HTML源码合集，适合前端开发人员、网站项目搭建者以及正在学习HTML、CSS、JavaScript的初学者。素材覆盖不同配色、布局与交互样式，可帮助快速套用、替换或借鉴，也能用于教学演示与个人练习。压缩包共245个文件，含30个HTML页面、30个CSS样式、19个JS脚本，以及大量jpg/png图片素材和字体图标文件，整体约29.43MB，目录层次清晰，便于按需取用。目前已吸引6972人学习下载，说明其实用性得到众多开发者认可。源码结构简洁、注释易懂、复用性高，既适合直接嵌入各类Web项目，也可以作为登录模块的样式参考与二次开发基础，是构建登录页时值得收藏的一套高质量模板。

1. 登录页是门面，也是块硬骨头：14种HTML登录样式怎么选怎么改

登录页面是几乎所有Web项目的门面，也是最容易让前端反复返工的地方。这次要拆的是一套HTML登录页面源码，里面打包了14种不同风格的登录页实现，覆盖企业后台、个人主页、SaaS产品登录等常见场景，并配上了表单校验和CSS动效。对经常要交演示项目或者要快速出页面的人来说，这套源码能省下好几个晚上的工作量。它适合两类人：一类是想直接打开改成自己配色的新手，另一类是想要一套登录表单骨架、把里面的校验和动画思路抽出来复用的熟手。先说结论：这套源码不是框架，就是纯HTML、CSS、JavaScript，没有构建步骤，打开就能改。

2. 先拆目录结构：14套样式不是14个孤立的HTML文件

2.1 每套风格的文件构成：HTML、CSS、JS各管什么

拿到资源包后，不要急着双击打开第一个HTML文件。先看一眼目录结构，这套源码的组织方式直接决定你后面改起来是省事还是翻车。常见的组织形式是一套风格一个文件夹，里面放着index.html、css目录、js目录，有部分风格会把样式和脚本直接内联在HTML里，这个后面看代码就知道。

login-templates/ ├── 01-classic/ │ ├── index.html │ ├── css/ │ │ └── style.css │ └── js/ │ └── script.js ├── 02-glassmorphism/ │ ├── index.html │ └── css/ │ └── style.css └── 03-gradient/ ├── index.html ├── css/ │ └── style.css └── js/ ├── script.js └── particles.js

HTML管结构，也就是登录表单长什么样、字段有哪些、按钮放在哪，这个文件里还包含了页面的元信息，比如title、lang、viewport。CSS管外观，包括配色、间距、字体、背景动画、响应式断点，思路基本是按选择器一层层覆盖。JS管行为，常见的是表单校验、错误提示、验证码切换、部分模板的粒子背景动画也放在JS里。三者职责边界分得比较清楚，我一般会把CSS文件开头区域当作模板的“配置面板”，先看那里的变量的注释，再决定从哪里下手改。

2.2 本地跑起来：用 http.server 或 Live Server 预览

双击HTML文件虽然能打开，但我不推荐，原因后面避坑章节会展开讲。这套源码最好在一个本地HTTP服务下预览，两种方式任选。如果你装了Python，在模板根目录起一个静态服务是最快的：

cd login-templates python3 -m http.server 8080

然后浏览器访问http://localhost:8080，就能看到一个模板索引页，或者直接进http://localhost:8080/01-classic/看单独某个风格。如果没装Python，用VS Code打开资源包目录，安装Live Server插件，右键index.html，选择Open with Live Server，它会在http://127.0.0.1:5500启动一个服务，页面改动后浏览器自动刷新。

这里要解释一下为什么要走HTTP服务而不是file协议。直接双击打开时，URL是file:///...，这种协议下浏览器的安全策略会更严格，部分模板里的动态加载、字体加载、ES6模块化代码可能会报跨域错误或加载失败，而且改动CSS后刷新经常有缓存残留。用本地服务跑能少一堆莫名其妙的问题。

2.3 表单的默认行为：action、method 与字段属性

不管哪一套风格，登录页的核心都是一个表单，所以先看懂表单的默认行为，你才能控制它。模板里最常见的形式是这样：

<form action="/api/login" method="post" class="login-form"> <input type="text" name="username" placeholder="请输入用户名" autocomplete="username"> <input type="password" name="password" placeholder="请输入密码" autocomplete="current-password"> <button type="submit">登 录</button> </form>

action是表单提交的目标地址，模板里一般填的是占位符或空字符串，真对接后端时改成你的接口地址；method="post"表示字段通过POST请求体发送，如果没写method，浏览器默认走GET，登录密码就会出现在URL里，这个千万不能留。autocomplete属性控制浏览器是否提示保存账号密码，不想让演示环境弹一长串密码提示的话，把它设成off即可。name属性是字段提交给后端时的键名，后端只看name，不改名字就默认为username、password，想换成employeeId之类的自己在HTML里改。

2.4 换一套风格前先看这三处：背景、主色与表单结构

14套风格里，有些是纯色极简风，有些是渐变背景，有些是全屏粒子动画。拿到任何一套，先定位三个地方：body或.app的背景定义、CSS里的主色变量、form的布局方式。把这几处搞清楚，你换主题、换文案就不至于全局搜索替换颜色值导致改出脏东西。

一般我会在浏览器里按F12打开开发者工具，选中body元素，看它的background是写在样式表里还是内联style里；然后切到Sources面板，找到CSS文件里的:root或顶部注释块，看它有没有定义变量。有变量的模板，改造起来效率高很多；没有变量的模板，我会建议你先把主色值拎出来定义成变量再动，不然14套源码改到第5套时，你会忘记每套的按钮配色到底藏在哪一行。

3. 改样式不靠猜：从CSS变量到全局属性

3.1 全局重置与字体栈：为什么改了body字号没生效

登录模板的第一屏看起来干不干净，很大程度上取决于CSS重置写得好不好。资源包里部分的CSS开头会有一段全局重置：

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f7fb; color: #333; }

box-sizing: border-box的作用是让padding算进width内部，避免你设置width: 100%后再加padding导致元素溢出容器。font-family这一串字体栈的含义是：macOS用PingFang SC，Windows用Microsoft YaHei，都没有就回退到系统默认sans-serif。我见过不少人直接在body里改了字号，结果页面纹丝不动，原因很简单：模板里给某个类设置了更具体的字号，比如.login-title { font-size: 24px; }，优先级盖过了body。遇到这种情况直接查那个类，改类下面的字号就行，不要跟选择器优先级较劲。

3.2 主色与间距：找 :root 里的CSS变量

稍微正规一点的现代模板，都会在CSS开头定义一套自定义属性，俗称CSS变量。改配色时，这是你的第一站：

:root { --primary: #5b7cfa; --primary-hover: #4370e5; --error: #e35d5d; --radius: 8px; --shadow: 0 4px 12px rgba(91, 124, 250, 0.25); }

这里的变量名可能不完全一样，但逻辑差不多。--primary是主色，按钮、链接、输入框焦点框都用它；--primary-hover是鼠标悬停时的深一档颜色；--error是错误提示的红色，一般用于表单下方“用户名或密码错误”之类的文案。改主色时，别用编辑器的全局替换去把所有的#3b82f6替换成别的色值，那样会连带把阴影、渐变、边框都改乱。正确做法是只改变量定义处，比如把--primary改成#16a34a，按钮和链接会自动跟着变。这里的原理是，CSS变量会沿着DOM树向下继承，所有引用var(--primary)的规则都会一次性更新。

3.3 表单输入区的焦点态：border、box-shadow与placeholder

登录页是否显得有品质感，很大程度上看输入框聚焦时的反馈。大部分浏览器默认会给input一个蓝色粗边框，难看不统一，模板里一般会重置掉然后自己定义焦点态：

.login-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #e2e6ef; border-radius: var(--radius); font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; } .login-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.15); outline: none; }

登录输入框的高度，44px是一个比较舒服的触控尺寸，小于40px在手机上点起来就费劲了。padding的0 14px表示上下为0、左右留14像素，文字不会顶在边框上。焦点态这里比较关键：outline: none去掉浏览器自带的黑色外框，然后用box-shadow: 0 0 0 3px模拟一个柔和的彩色光圈。这种做法的好处是光圈不占布局空间，不会因为加了边框而导致整个输入区跳动。如果你不喜欢圆角，改--radius即可；不需要全选输入框，那会连radio、checkbox的样式都一起误伤。

3.4 背景动效的取舍：渐变、粒子与玻璃拟态

14套里有几套是带背景动效的，常见的是渐变位移和粒子漂浮。粒子效果多数是canvas画的，资源包里的JS文件一般会在页面加载时生成一个canvas然后循环绘图。这种效果好看，但要注意两点。一是性能，低端安卓机上，全屏粒子的帧率会明显下滑。我一般会把粒子数量调低，或者把canvas的宽高按DPR缩放限制在2倍以内，而不是让它在高分屏上跑满4倍像素。二是系统偏好，有不少用户开了“减少动态效果”选项，规范的模板会写一段适配：

@media (prefers-reduced-motion: reduce) { .particles, .bg-animation { animation: none !important; } }

prefers-reduced-motion是CSS媒体查询，用于检测用户系统是否开启了减弱动效。开着的情况下，主动关掉背景动画，既是对用户的尊重，也能减少CPU占用。如果你的模板里没这段，建议自己补上。另外，背景动画所在的层要给它一个z-index: 0，登录卡片至少z-index: 1，否则粒子会盖在输入框上面，鼠标点不到表单甚至视觉上出现一层飘浮的噪点。

4. 响应式适配：手机、平板、PC上的登录页

4.1 断点怎么选：先按模板已有的媒体查询走

14套模板里，每一套的响应式策略不太一样，有的用max-width从大到小写，有的用min-width从小到大写。建议先看CSS文件里有没有现成的媒体查询块，直接沿用它的断点体系，不要自己另起炉灶改一套新断点，那样很容易出现平板尺寸的样式被两套断点同时命中，改出一个“两头都不对”的布局。常见的断点约定是768px、992px、1200px，分别对应平板竖屏、平板横屏、普通笔记本宽度。

@media (max-width: 768px) { .login-card { width: 92%; max-width: 360px; padding: 24px 20px; } }

解析一下这段：max-width: 768px表示视口宽度小于或等于768像素时生效，手机和部分平板竖屏都在这个范围内。.login-card在小屏上宽度变成视口的92%，同时设置max-width: 360px防止手机横屏时卡片被拉得过宽。padding从桌面端的32px收紧到24px，是为了在高度有限的小屏上给键盘留出空间。如果你用的是手机优先的模板，它的写法会是：

@media (min-width: 768px) { .login-card { width: 420px; } }

这个式子表示基础样式为手机宽度，当视口大于等于768px时加宽到固定420px。两种思路没有对错，但改的时候要清楚当前模板用的是哪种，别混着写。

4.2 移动端输入框：16px字体防页面缩放

在iOS Safari上，如果一个input的font-size小于16px，那么在聚焦时浏览器会自作主张地放大整个页面，用户输完密码还得手动缩小回来，体验非常糟。解决方案不是去user-scalable=no禁缩放，而是把输入框字号顶到16px：

@media (max-width: 768px) { .login-input { font-size: 16px; } }

16px是iOS Safari触发自动放大的阈值，大于等于它就不会放大。这里有一个权衡：16px的字在PC端会显得偏大，所以一般只在小屏断点里覆盖字号。如果你不想写媒体查询，也可以在HTML的viewport里加maximum-scale=1，但那个会损害无障碍缩放，我基本不建议。正确做法就是把移动端输入框的font-size设成16像素。

4.3 左右分栏与卡片式布局：小屏下怎么折叠

资源包里有一类是左右分栏结构，左边是品牌区，放Logo、标语、背景图或者宣传文案，右边是登录表单。桌面端这种布局大气，但到了手机宽度上，左侧区域占了半屏还看不到内容，就是个灾难。所以模板在小屏断点下通常会把左栏隐藏或者压缩成顶部一条：

.login-split { display: flex; min-height: 100vh; } .login-split .brand-panel { flex: 1; background: linear-gradient(135deg, #1e3c8a, #3b82f6); } .login-split .form-panel { flex: 1; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .login-split .brand-panel { display: none; } }

flex: 1在这里表示左右两栏等分剩余空间，这是个典型的flex弹性布局写法。小屏断点里把brand-panel直接display: none藏掉，整个页面就只剩下表单栏。藏掉品牌区之后，记得把品牌Logo放进表单区的上方，不然小屏用户打开页面不知道这是谁家的产品。一种做法是在HTML里准备两个Logo位置，一个给左栏大屏展示，一个给表单栏顶部小屏展示，通过媒体查询控制显隐。

4.4 键盘弹出时的体验：输入框不被遮挡

移动端浏览器底部地址栏和弹出的虚拟键盘，经常把登录按钮顶出屏幕。这里有一个大家容易踩的坑：.login-split用了min-height: 100vh，而vh在手机浏览器里会随地址栏的收起和弹出动态变化，导致登录卡片忽上忽下。现在的解决思路是把高度单位改成dvh：

.login-split { min-height: 100dvh; }

100dvh表示“动态视口高度的100%”，它会跟随浏览器地址栏的显示状态实时变化，键盘弹起时页面能正确收拢到可见区域。如果模板里用的是老式100vh，优先改过来。对不需要全屏居中的模板，也可以不设高度，让body自然滚动，这样键盘弹起时输入框始终可滚动到可见位置，这反而是最省心的方案。

5. 常见问题与避坑：拆这套源码时踩过的坑

5.1 现象1：浏览器打开后整个页面没有样式

刚拿到资源包的人最容易遇到这个：双击index.html，页面是出来了，但所有元素挤在左上角，没有颜色、没有布局、没有背景图。打开开发者工具的Network面板，能看到CSS文件请求后面有个红色小叉。

原因就两个：一是直接用file协议打开，虽然CSS引用一般能加载，但浏览器对部分资源加载有限制；二是CSS文件路径不对，模板里写的是css/style.css，但你的文件夹里实际叫CSS/style.css，在Windows下大小写不敏感所以没事，部署到Linux服务器上就立刻404。

解决：把CSS路径改成实际文件名，保持全小写是一个好习惯；同时用本地HTTP服务来预览，不要靠双击。我每次拆这类源码，第一步都是先在终端起一个http.server，从根目录访问，一切正常后再去动代码。

5.2 现象2：输入框聚焦时页面突然放大

手机浏览器上试样式，手指点了用户名输入框，整个页面猛地放大一块，输完字又缩回去。这个在Android和iOS上我都见过，体验很糟糕。

原因：iOS Safari的逻辑是，输入框字体小于16px时，为了确保文字可读性，自动放大页面。这属于系统的可访问性设计，不是bug，但放在登录页里就显得很突兀。

解决：在移动端断点里把所有输入框（包括密码框、验证码框）的font-size设为16px或以上。我一般直接全局设置：

input[type="text"], input[type="password"], input[type="email"] { font-size: 16px; }

5.3 现象3：按钮点击后页面刷新，什么都没发生

给客户演示的时候点了“登录”按钮，页面闪一下刷新了，没有任何提示，也没有跳转。原因几乎可以确定是：按钮的type是submit，它触发了form的默认提交行为；而form的action往往是空字符串或没写，浏览器就提交到当前URL，于是页面重新加载。

解决：先确认你是在演示静态效果还是在对接后端。如果只是前端展示，给表单的submit事件加上preventDefault()：

document.querySelector('.login-form').addEventListener('submit', function (event) { event.preventDefault(); console.log('登录表单被拦截，未提交到服务器'); // 在这里做你的校验或后续处理 });

preventDefault()的意义就是阻止浏览器对submit事件的默认处理。注意，事件绑定要在DOM加载完之后执行，否则querySelector找不到表单。如果模板把JS放在head里，你需要在外面包一层DOMContentLoaded。

5.4 现象4：图标或字体显示为方框

页面里的用户图标、锁图标全部显示成一个方框，或者登录按钮上的图标变成一个“X”。这个在演示环境很常见，尤其是模板里用了在线图标库的情况下。

原因：HTML通过外链引用了比如//xxxx.com/font-awesome/xxx.css这样的地址，如果那个域名当前不可达、被网络策略拦截、或者DNS解析慢，图标字体就加载不出来，浏览器以占位方框显示。

解决：把图标字体文件下载到本地，放进项目的fonts目录，然后把CSS引用改成相对路径：

<link rel="stylesheet" href="fonts/fontawesome/css/all.min.css">

如果你不需要图标，也可以直接把图标相关代码删掉，避免一次多余的HTTP请求。上线前用F12的Network面板过一遍，所有请求状态码200才算干净。

5.5 现象5：动画在Safari上不跑，其他浏览器正常

Chrome和Edge里看到背景渐变在平滑流动，粒子在飘，结果一开Safari卡住不动。原因比较经典：早期Safari对CSS动画属性的前缀要求比较严格，尤其是-webkit-transform、-webkit-animation这类，新版Safari虽然逐步支持无前缀写法，但部分老版本iOS设备还是会翻车。

解决：给动画属性补上带-webkit-前缀的声明，或者用Autoprefixer在发布前统一补全。手动补的写法是：

@-webkit-keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } } @keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }

双写一份虽然啰嗦，但在兼容性上有保证。JS动画如果是用canvas跑的，则要注意浏览器是否支持requestAnimationFrame，老设备上可以在代码开头做降级处理，不支持就直接跳过动画显示静态背景。

6. 把它变成能交付的项目：校验、整合与上线前检查

6.1 把校验逻辑从页面内抽出来

模板里不少是写成<form onsubmit="return checkForm()">这种内联方式。这种写法在纯静态demo里没问题，但真要交付给客户，或往工程项目里集成，最好把校验逻辑抽出来，用标准的事件注册代替内联。

const form = document.getElementById('loginForm'); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); form.addEventListener('submit', function (event) { event.preventDefault(); if (usernameInput.value.trim() === '') { alert('请输入用户名'); usernameInput.focus(); return; } if (passwordInput.value.length < 6) { alert('密码不能少于6位'); passwordInput.focus(); return; } form.submit(); });

trim()去掉用户误输入的首尾空格；passwordInput.value.length用来做最小长度校验，8位以上通用性更好，项目里有自己的密码规范就按规范的来。form.submit()是手动放行提交，你在业务里更常见的做法是把这一步换成fetch请求，把数据交给后端而不是让浏览器刷新页面。

6.2 与后端接口对接：action地址与POST请求

静态演示项目要转成生产登录页，核心改动点是form提交方式。现在主流做法是不用form原生提交，而是fetch发送JSON，这样能拿到后端返回的更细结构，比如错误码、token、用户信息，然后由前端决定跳转还是展示错误：

const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: usernameInput.value.trim(), password: passwordInput.value }) }); const result = await response.json(); if (result.code === 0) { window.location.href = result.redirectUrl || '/dashboard'; } else { alert(result.message || '登录失败，请重试'); }

fetch默认不会像form跳转那样刷新页面，所以你可以保留页面状态来显示错误提示，这也是为什么现在首页登录和后台登录大多走上这条路。window.location.href是前端跳转，跳转地址最好由后端返回，而不是在前端写死，这样后续切换环境不需要改代码。

6.3 上线前过一遍的关键检查清单

交付前我会把清单打印在便签上贴屏幕旁边，逐项打勾：

这个清单是我自己的习惯，每次上新项目都强制走一遍。之前有一次赶交付，跳过资源加载检查，结果字体库域名解析失败，一整个登录页的图标全变成方框，客户截了图发过来，非常尴尬。从那以后我每次都会在交付前把Network那栏过一遍，顺便检查有没有多余的断链请求，再花两分钟把移动端模拟器切出来看看表单聚焦效果。这套14种风格的登录源码，按这个流程走一遍之后，你再拿去改、去对接接口，心里就有底了，希望帮到你。

本文还有配套的精品资源，点击获取