前端实现找回密码流程图
2024-05-09 17:23:21
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>找回密码流程</title>
</head>
<body>
<div class="content"><div class="web-width"><div class="for-liucheng"><div class="liulist for-cur"></div><div class="liulist"></div><div class="liulist"></div><div class="liulist"></div><div class="liutextbox"><div class="liutext for-cur"><em>1</em><br/><strong>填写账户名</strong></div><div class="liutext"><em>2</em><br/><strong>验证身份</strong></div><div class="liutext"><em>3</em><br/><strong>设置新密码</strong></div><div class="liutext"><em>4</em><br/><strong>完成</strong></div></div></div><form action="forgetPwd2.htm|" method="get" class="forget-pwd"><dl><dt>账户名：</dt><dd><input type="text"/></dd><div class="clears"></div></dl><dl><dt>验证码：</dt><dd><input type="text"/><div class="yanzma"><img src="yzm.gif"/> <a href="#">换一换</a></div></dd><div class="clears"></div></dl><div class="subtijiao"><input type="submit" value="提交"/></div></form></div>
</div>
<style type="text/css">.clears {clear: both}.for-liucheng {width: 640px;margin: 30px auto;height: 50px;padding: 20px 0 0 0;position: relative}.liulist {float: left;width: 25%;height: 7px;background: #ccc}.liutextbox {position: absolute;width: 100%;left: 0;top: 10px}.liutextbox .liutext {float: left;width: 25%;text-align: center}.liutextbox .liutext em {display: inline-block;width: 24px;height: 24px;-moz-border-radius: 24px;-webkit-border-radius: 24px;border-radius: 24px;background: #ccc;text-align: center;font-size: 14px;line-height: 24px;font-style: normal;font-weight: bold;color: #fff}.liutextbox .liutext strong {display: inline-block;height: 26px;line-height: 26px;font-weight: 400}.liulist.for-cur {background: #77b852}.liutextbox .for-cur em {background: #77b852}.liutextbox .for-cur strong {color: #77b852}.forget-pwd {width: 500px;margin: 20px auto;min-height: 400px}.forget-pwd input, .forget-pwd select, .forget-pwd button {border: 0;margin: 0;padding: 0;background: 0}.forget-pwd dl {margin-bottom: 20px}.forget-pwd dt {float: left;padding-right: 10px;width: 100px;height: 30px;line-height: 30px;text-align: right;font-size: 14px}.forget-pwd dd {float: left;width: 380px;height: 30px;position: relative}.forget-pwd dd input {width: 190px;height: 28px;border: #ccc 1px solid}.forget-pwd dd select {width: 190px;height: 30px;border: #ccc 1px solid}.forget-pwd dd button {width: 120px;height: 30px;line-height: 30px;border: #ddd 1px solid;background: #f1f1f1;text-align: center;cursor: pointer;font-size: 14px;color: #666}.forget-pwd .yanzma {position: absolute;left: 200px;top: 2px;height: 30px;line-height: 30px;width: 180px}.subtijiao {padding: 0 0 0 110px}.subtijiao input {width: 85px;height: 32px;background: #f60;color: #fff;font-size: 14px;cursor: pointer}.successs {text-align: center;padding: 20px 0 60px 0}.successs h3 {padding: 20px;font-size: 25px;color: #a0cd4e}
</style>
<style>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select {margin: 0;padding: 0;border: 0;}table {border-collapse: collapse;}body {font-size: 12px;color: #333;font-family: "Microsoft Yahei";overflow-x: hidden;background: #f7f7f7;}.bodybg {background: url(../images/bodybg.jpg) right 160px no-repeat;}img, a {border: 0;text-decoration: none;}ol, ul {list-style: none;}a {color: #333;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;transition: all .3s ease-out;}a:hover {color: #005b9e;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;transition: all .3s ease-out;}img {max-width: 100%;height: auto;}.web-width {width: 1200px;margin: 0 auto;}.fl {float: left;}.fr {float: right;}
</style>
</body>
</html>
运行效果：
前端实现找回密码流程图相关推荐
- Java进阶之Jsp找回密码知识点总结
实例说明 用户账号代表着用户在一个网站上的身份,想使用这个账号登录网站就必须要输入与之对应的密码,有些疏忽大意的人会出现错记甚至遗忘自己登录密码的情况,这个时候就需要使用密码管理功能让用户为自己重新初 ...
- 找回密码功能的流程总结
公司业务里需要做密码找回的功能. 使用邮件验证的方式实现密码找回. 当用户忘记自己密码的时候 , 可以通过输入自己的邮件号 , 系统发送携带验证码的邮件号来验证用户身份. 但是使用这样的验证方式,当用 ...
- mysql1.8找回密码_PHP+Mysql+jQuery找回密码
通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密 ...
- WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
- js里面把密码encode_PHP会员找回密码功能的简单实现
设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名时,点击登录页面的"找回密码"超链接,打开表单,并输入注册用的E-MAI ...
- 5.登录注册找回密码
登录注册找回密码 登录 登录方式有账号密码登录.扫码登录.手机验证登录和第三方登录. 手机登录,登录快捷方便,不用记住密码,但是必须有手机在身边. 账号密码登录,需要记住密码,容易遗忘,可以和手 ...
- java web 找回密码_java web实现 忘记密码（找回密码）功能及代码
java web实现 忘记密码(找回密码)功能及代码 (一).总体思路 (二).部分截图 (三).部分代码 (一).总体思路: 1.在 找回密码页面 录入 姓名.邮箱和验证码,录入后点击[提交]按钮, ...
- 基于SpringBoot实现邮箱找回密码
基于邮箱发送验证码的方式 >>文章末尾有demo的git地址供下载参考 实现思路 用户点击忘记密码 用户输入用户名以及邮箱,点击获取验证码 后端校验用户名以及邮箱,正确后生成验证码 生成的 ...
- SpringBoot实现通过邮箱找回密码功能
养成习惯,先赞后看!!! 目录 1.前言 2.步骤 2.1导入依赖 2.2开启邮箱的SMTP服务 2.3配置application.yaml文件 2.4 编写逻辑的步骤 2.4.1创建pm_valid ...
最新文章
- linux 中samba账号登录密码,ubuntu下的Samba配置：使每个用户可以用自己的用户名和密码登录自己的home目录...
- 上海理工大学第二届“联想杯”全国程序设计邀请赛 - Little Witch Academia(矩阵快速幂)
- 四、卫星定位《苹果iOS实例编程入门教程》
- ZOJ1041-Transmitters【差积,计算几何】
- [机器学习-sklearn]数据预处理要点总结
- 从linux刷到windows,我为什么从Linux重新回归到Windows平台
- NYOJ65 - 另一种阶乘问题
- c语言 编程打印几何图形,c语言图形
- mysql输出九九乘法表_SQL 打印九九乘法表
- 5G无线关键技术 — 新型传输波形技术和先进编码与调制技术
- 编译错误：invalid types ‘int[int]‘ for array subscrip-markdown编辑器
- tcpdump提取源IP
- M4V格式怎么在线转换MP4格式
- 论Cardano修仙之路，聊ADA现状分析
- java加减法验证码_Java,Springboot 实现算法验证码加减法图形验证码，Kaptcha 实现加减法验证码...
- C语言输出浮点数的符号、整数部分和小数部分
- 2020nyist第四场个人赛
- 机器学习——霍夫丁不等式【转】
- 光耦隔离在单片机通信电路中的应用
- 小程序和新零售，双双涉入深水区