登录页模板 | 移动端 H5 全屏背景登录 UI，jQuery 单页开箱即用

基于 jQuery 打造的移动端（WAP/H5）登录页模板。开箱即用，替换品牌素材即可上线。

登录页是用户进入产品的第一道门面，也是最考验视觉功底的单页：全屏氛围、表单质感、多机型适配，一样都不能少。这套模板用一页代码把这些问题全部解决——全屏品牌背景、半透明胶囊输入框、圆角发光登录按钮、小屏媒体查询兜底，替换图片与文案即可直接上线。

模板亮点

1. 全屏沉浸式视觉结构

• 背景图 background-size: 100% 100% 铺满整屏，min-height: 100vh 保证任何机型都满屏
• 版心宽度约束在 320px ~ 640px 之间并水平居中，正是主流 WAP 页面的黄金宽度
• 页面自上而下分为 Logo 区、品牌横幅区、版本号、登录表单、底部版权五个层次，节奏清晰

2. 精致的胶囊表单设计

• 输入框采用半透明白底 + 30px 圆角胶囊造型（rgba(255,255,255,.3)），与背景图自然融合
• 每个输入项左侧带图标，图标右侧以竖线分隔（背景图实现），细节完整
• placeholder 文字统一白色，含明暗多套浏览器前缀适配
• 登录按钮为白底红字（#c00）圆角按钮，加 letter-spacing: 5px 字距排版，质感突出

3. 多机型媒体查询兜底

• @media (max-height: 490px)：压缩 Logo 与表单留白，横屏 / 小屏不溢出
• @media (max-width: 320px)：基准字号降为 14px，iPhone SE 级别小屏显示完整
• viewport 禁用缩放，移动端触控体验稳定

4. 工程化的样式基线

• 内置 normalize.css 抹平浏览器默认差异
• 全局 box-sizing: border-box、禁用点击高亮、输入框去边框化，移动端细节一次到位
• 输入框 autofill 白底遮罩处理，避免浏览器自动填充破坏视觉

5. 零依赖、秒级上线

单 HTML + 两个 CSS + 一组图片，目录内置 jQuery 1.10 供二次开发表单校验、提交拦截使用；替换背景与 Logo 即是一页全新的品牌登录页。

技术栈

技术	版本	用途
jQuery	1.10.0	内置备用，供二次开发表单交互
normalize.css	—	浏览器样式基线
原生 CSS3	—	全屏背景 / 胶囊表单 / 媒体查询

项目结构

login/
├── login.html        # 登录页（账号 / 密码 / 登录按钮 / 版权尾栏）
├── css/
│   ├── normalize.css # 浏览器样式重置
│   └── style.css     # 页面样式（白底红字按钮、胶囊输入框、媒体查询）
├── js/
│   └── jquery.min.js # jQuery 1.10.0（二次开发备用）
└── img/              # 背景图、Logo、分隔横幅、输入图标等素材

快速开始

纯静态模板，无需安装任何依赖。

# 方式一：浏览器直接打开
双击 login.html 即可预览

# 方式二：本地静态服务器
cd login
python3 -m http.server 8080
# 访问 http://localhost:8080/login.html

建议在浏览器开发者工具中切换设备模拟（iPhone / Android）查看移动端效果。

二次开发指南

需求	操作
更换品牌	替换 img/ 下 logo.png、login_bg.png、hr.png，同名覆盖
修改文案	编辑 login.html 中 placeholder 与底部版权文字
更换按钮配色	修改 css/style.css 中 .ui-submit 的 #fff / #c00
更换表单氛围	调整 .fm-b dl 的 rgba(255,255,255,.3) 透明度与圆角
增加表单项	复制一段 dl.clearfix 结构（图标 + 输入框）即可
接入登录接口	引入 js/jquery.min.js，拦截 submit 提交 Ajax 请求

适用场景

移动端 App 内嵌 H5 登录页、WAP 站点登录、微信内页登录、企业内部系统（如 Windows 域账号）移动入口，也可作为任何移动端项目的启动页 / 门户页视觉底稿。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 天起	替图改字，半小时上线
页面还原度	需反复调样式	全屏 + 胶囊表单质感现成
交互与动画	自行实现	hover / active 反馈已内置
适配	自行调试	320~640px + 双媒体查询兜底
维护成本	自行承担	单页结构，一眼看懂

在线预览

将整个目录部署至任意静态托管（GitHub Pages / 静态服务器 / OSS）即可在线浏览，建议手机访问体验最佳。

http://8.166.93.126:8989/login