html+css简单登录注册及密码重置页面

已于 2022-11-03 23:43:27 修改
阅读量8.8k 收藏 91
点赞数 22
分类专栏： 前端学习 文章标签： html5 css3 css 前端
于 2022-11-03 23:41:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buglli/article/details/127680670
版权

HTML CSS学习（一）只有简单的页面设计样式（无js）

1.登录页面

denglu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="denglu.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="main">
            <h1 class="login">Login</h1>
            <div class="content">
                    <input type="text" class="name" placeholder="请输入用户名"><br>
                    <input type="password" class="password" placeholder="请输入密码"><br>
                    <input type="button" class="button1" value="登录"><br>
                    <a href="zhuce.html">
                        <input type="button" class="button2" value="注册"><br>
                    </a>
                    <span class="forget" "><a href="forge.html" target="_blank">忘记密码</a></span>
            </div>
        </div>
    </div>
</body>
</html>

denglu.css

/*清除元素的默认设置，为之后自定义的css样式设计不产生偏差*/
.body{
    margin:0;
    padding:0;
}
/*删除下划线*/
a{
    text-decoration: none;
}
/*设置超链接未点击时的颜色*/
a:link{
    color:rgb(246, 65, 119) ;
}
/* 已访问的链接 */
a:visited {
    color: rgb(246, 65, 119)} 
/* 鼠标移动到链接上 */
a:hover {
    color: rgb(231, 47, 47)} 

.container{
    /*让div大小和屏幕的宽高一样大小*/
    position:absolute; 
    left:0; top:0; 
    width:100%;
    height:100%; 
    /*设置背景图片*/
    background-image: url(back.jpg);

}
.main{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.login{
    margin-bottom: 60px;
    text-align: center;
    color:white;
    font-family:"STCaiyun";
    font-size: 68px;
    /*设置发光效果*/
    text-shadow: 0 0 10px rgb(221, 76, 124),0 0 20px rgb(221, 76, 124),0 0 30px rgb(221, 76, 124),0 0 40px  rgb(221, 76, 124);
}
.forget{
    font-weight:bolder;
    font-family:"YouYuan";
    font-size: 19px;
    display:block;
    position: absolute;
    left:30px;
    margin-top: 5px;
    
    
}
.content{
    height:320px;
    width:450px;
    border-radius: 10px;
    box-shadow: 5px 5px  azure;/*阴影设置*/
    background-color: rgba(253, 206, 237, 0.34);/*设置颜色，,0.34为透明度，这样不影响子级div的透明度*/
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    display: table-cell;
    /*垂直居中 */
    vertical-align: middle;
    /*水平居中*/
    text-align: center;

}

/*input框设置*/
input{
    color:rgb(251, 194, 202);/*input-value值内容的颜色设置*/
    
    font-size: 15px;/*input字体大小设置值*/
    outline:none;/*鼠标点击input框，不显示边框颜色*/
}
/*鼠标触碰用户名框，边框颜色改变*/

.name{
    height: 40px;
    width:230px;
    
    border-radius: 8px;/*设置边框圆角*/
    border-color: white;/*边框颜色*/
    margin-top: 5px;
    
}

.password{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 20px;/*设置元素的上外边距。*/
    margin-bottom: 25px;/*设置元素的下外边距。*/
    border-color: white;/*边框颜色*/
}
/*鼠标触碰登录，边框颜色改变*/
.button1:hover{
    border-color:lavender;/*边框颜色*/
}
.button1{
    height: 40px;
    width: 130px;
    font-size: 17px;
    font-family:"YouYuan";
    border-radius: 8px;/*设置边框圆角*/
    background-color:rgba(247, 77, 136, 0.91);/*登录框背景颜色*/
    border-color: rgba(243, 47, 116, 0);;/*边框颜色*/ 
}
/*鼠标触碰注册，边框颜色改变*/
.button2:hover{
    border-color:lavender;/*边框颜色*/
}
.button2{
    height: 40px;
    width: 130px;
    font-size: 17px;
    font-family:"YouYuan";
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 15px;
    background-color:rgba(247, 77, 136, 0.91);/*注册框背景颜色*/
    border-color: rgba(243, 47, 116, 0);;/*边框颜色*/ 
    
}

 

2. 注册页面

zhuce.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link rel="stylesheet" href="zhuce.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="main">
            <h1 class="register">Register</h1>
            <div class="content">
                    <input type="text" class="name" placeholder="请输入用户名"><br>
                    <input type="password" class="password1" placeholder="请输入密码"><br>
                    <input type="password" class="password2" placeholder="请再次输入密码"><br>
                    <input type="button" class="button" value="注册"><br>
            </div>
        </div>
    </div>
</body>
</html>

zhuce.css

/*清除元素的默认设置，为之后自定义的css样式设计不产生偏差*/
.body{
    margin:0;
    padding:0;
}


.container{
    /*让div大小和屏幕的宽高一样大小*/
    position:absolute; 
    left:0; top:0; 
    width:100%;
    height:100%; 
    /*设置背景图片*/
    background-image: url(back.jpg);

}
.main{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.register{
    margin-bottom: 60px;
    text-align: center;
    color:white;
    font-family:"STCaiyun";
    font-size: 68px;
    /*设置发光效果*/
    text-shadow: 0 0 10px rgb(221, 76, 124),0 0 20px rgb(221, 76, 124),0 0 30px rgb(221, 76, 124),0 0 40px  rgb(221, 76, 124);
}

.content{
    height:320px;
    width:450px;
    border-radius: 10px;
    box-shadow: 5px 5px  azure;/*阴影设置*/
    background-color: rgba(253, 206, 237, 0.34);/*设置颜色，,0.34为透明度，这样不影响子级div的透明度*/
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    display: table-cell;
    /*垂直居中 */
    vertical-align: middle;
    /*水平居中*/
    text-align: center;

}

/*input框设置*/
input{
    color:rgb(251, 194, 202);/*input-value值内容的颜色设置*/
    
    font-size: 15px;/*input字体大小设置值*/
    outline:none;/*鼠标点击input框，不显示边框颜色*/
}
/*鼠标触碰用户名框，边框颜色改变*/

.name{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    border-color: white;/*边框颜色*/
    margin-top: 5px;
    
}

.password1{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 20px;/*设置元素的上外边距。*/
    
    border-color: white;/*边框颜色*/
}
.password2{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 20px;/*设置元素的上外边距。*/
    margin-bottom: 25px;/*设置元素的下外边距。*/
    border-color: white;/*边框颜色*/
}
/*鼠标触碰登录，边框颜色改变*/
.button:hover{
    border-color:lavender;/*边框颜色*/
}
.button{
    height: 40px;
    width: 130px;
    font-size: 17px;
    font-family:"YouYuan";
    border-radius: 8px;/*设置边框圆角*/
    background-color:rgba(247, 77, 136, 0.91);/*框背景颜色*/
    border-color: rgba(243, 47, 116, 0);;/*边框颜色*/ 
}

 

3.重置密码页面

 forge.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="forge.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="main">
            <h1 class="reset">Reset</h1>
            <div class="content">
                    <input type="text" class="name" placeholder="请输入用户名"><br>
                    <input type="password" class="password1" placeholder="请输入密码"><br>
                    <input type="password" class="password2" placeholder="请再次输入密码"><br>
                    <input type="button" class="button" value="确定"><br>
            </div>
        </div>
    </div>
</body>
</html>

forge.css

/*清除元素的默认设置，为之后自定义的css样式设计不产生偏差*/
.body{
    margin:0;
    padding:0;
}

.container{
    /*让div大小和屏幕的宽高一样大小*/
    position:absolute; 
    left:0; top:0; 
    width:100%;
    height:100%; 
    /*设置背景图片*/
    background-image: url(back.jpg);

}
.main{
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.reset{
    margin-bottom: 60px;
    text-align: center;
    color:white;
    font-family:"STCaiyun";
    font-size: 68px;
    /*设置发光效果*/
    text-shadow: 0 0 10px rgb(221, 76, 124),0 0 20px rgb(221, 76, 124),0 0 30px rgb(221, 76, 124),0 0 40px  rgb(221, 76, 124);
}

.content{
    height:320px;
    width:450px;
    border-radius: 10px;
    box-shadow: 5px 5px  azure;/*阴影设置*/
    background-color: rgba(253, 206, 237, 0.34);/*设置颜色，,0.34为透明度，这样不影响子级div的透明度*/
    /*此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
    display: table-cell;
    /*垂直居中 */
    vertical-align: middle;
    /*水平居中*/
    text-align: center;

}

/*input框设置*/
input{
    color:rgb(251, 194, 202);/*input-value值内容的颜色设置*/
    
    font-size: 15px;/*input字体大小设置值*/
    outline:none;/*鼠标点击input框，不显示边框颜色*/
}
/*鼠标触碰用户名框，边框颜色改变*/

.name{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    border-color: white;/*边框颜色*/
    margin-top: 5px;
    
}

.password1{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 20px;/*设置元素的上外边距。*/
    
    border-color: white;/*边框颜色*/
}
.password2{
    height: 40px;
    width:230px;
    border-radius: 8px;/*设置边框圆角*/
    margin-top: 20px;/*设置元素的上外边距。*/
    margin-bottom: 25px;/*设置元素的下外边距。*/
    border-color: white;/*边框颜色*/
}
/*鼠标触碰登录，边框颜色改变*/
.button:hover{
    border-color:lavender;/*边框颜色*/
}
.button{
    height: 40px;
    width: 130px;
    font-size: 17px;
    font-family:"YouYuan";
    border-radius: 8px;/*设置边框圆角*/
    background-color:rgba(247, 77, 136, 0.91);/*框背景颜色*/
    border-color: rgba(243, 47, 116, 0);;/*边框颜色*/ 
}

 

buglli
关注
  • 22
    点赞
  • 踩
  • 91
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用户找回密码参考页面
07-12
用户找回密码参考页面设计，明天必须用到的
蓝色主题注册登录页面首页HTML网页模板.zip
08-11
蓝色登录HTML网页模板，有、登录、忘记密码、密码重置等HTML模板页面。
【WEB前端|H5实例】QQ修改密码页面模仿/js+css+html实现密码验证/必须包含数字字符字母两种组合/不含非法字符/密码强度验证/不能是最近使用过的密码/密码输入框实时监控
dxy1128的博客
04-25 1959
最近小组做项目自己被分到做修改密码页面，参考了qq修改密码页面，发现验证功能很全。js新手入门，学着写了一个。代码如下。 js //旧密码 function myFunctionforPast(){ var n=document.getElementById("pwdpast").value; if(n==""){ document.getElementById("pwdpast-...
html记住用户名密码
09-19
用户登录功能、同时记住用户名密码，通过复选框勾选和不勾选实现记住、清除cookie中用户名密码等。
html+css管理系统后台登录页面
04-10
html+css管理系统后台登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
（仿牛客论坛项目）06 - 忘记密码
qq_42148002的博客
07-04 2187
1.2 修改 forget.html 页面 修改引入的样式表路径为 thymeleaf 格式的，包括所有使用相对路径的 CSS、JS 文件都修改为绝对路径格式，例如：； 同时，头部文件进行代码复用； 1.4 测试页面 在登陆页面点击忘记密码： 2.2 UserService 层 实现获取验证码的方法，根据用户输入的邮箱；都没问题的话发送随机 6 位字符串验证码到指定邮箱（这里已经有做好的 html 模板可以使用，其中需要邮箱和验证码两个信息）；同时记录下来验证码和验证码过期时间，之后验证的时候使
登录界面、找回密码界面、修改密码界面的源代码
09-05
登录界面、找回密码界面、修改密码界面的源代码。 在制作过程中，有使用CSS、JS、Jquery。其中还有cookie、base64的js插件。 每一次刷新登录页面都可以自动刷新验证码。 提供的源代码仅供参考，如有不足，请多多指教，谢谢！
前端实践 登录 注册 修改密码
布布熊的博客
03-09 725
前端实践记录
"忘记密码"功能过程及其实现细节
tianzhihensu的专栏
01-30 4932
对于忘记密码功能，一般都是通过2种方式找回：一种是通过预留电话号码发送验证码找回，另一个是通过设定邮箱找回。对于具体的找回流程，参见：http://www.yixieshi.com/ucd/9207.html。 这里结合目前做的项目，详细的说明一下密码找回的过程。这里用的是邮箱找回。根据一般的忘记密码的流程来说明。我采用的流程是： 流程 【登录】 --&gt; 【点击忘记密码】...
springboot+html实现密码重置功能
m0_67930426的博客
10-18 1210
3.第一次填写的（password）和第二次填写的（Repassword)要相等。1.先判断要重置密码的用户是否在数据库中存在，如果如果存在就执行下一个操作。符合上面所有条件才可通过（返回登录）这一按钮返回到登录界面。2.第二次填写密码时（确认密码），不能为空。通过点击忘记密码跳转到密码重置页面。2.第一次填写密码时不能为空。
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
html+css登录页面
06-12
6套登录模板，可用于前后台登录模板使用。效果不错。欢迎下载试用
HTML+CSS 完成登录页面UI.zip
05-09
HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录页面UI HTML+CSS 完成登录...
HTML5+CSS3+JavaScript-登录页面
12-17
一个包含logo、轮播图、正则表达式、CSS3渐变...的登录界面。
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5(2)
最新发布
cookies_s_的博客
04-28 379
定义列表一般用于网页底部的帮助中心。
特别的时钟特别的倒计时
lulei5153的博客
04-28 267
念念不忘的歌曲：That's Why You Go Away。
CSS3多列（详解网页多列布局应用）
百赢出品，必属精品
04-22 947
CSS3 多列布局是一种用于排列文本内容的 CSS 模块，它允许开发者将文本分成多列显示，从而创建出类似于报纸、杂志等印刷媒体的布局效果。多列布局适用于需要在网页上呈现大段文本的场景，使得文本内容更具可读性和美观性。
CSS3 animation (动画) 属性
Winsom1的博客
04-28 354
animation-fill-mode 动画结束状态， 默认 backwards 回到起始 forwards 保持。animation-play-state 鼠标放上运行或暂停，默认 running不暂停 pause 鼠标放上暂停。animation 所有动画属性的简写属性，除了animation-play-state属性。linear 匀速。
html用户登陆注册忘记密码记住
03-04
当用户在HTML网页中注册并登录后，可以使用浏览器提供的“记住密码”功能，将登录信息存储在本地计算机中，以便下次访问时自动填写用户名和密码。但是，如果用户忘记了密码，可以通过以下步骤来重置密码： 1. 在登录页面下方或登录框附近找到“忘记密码”链接。 2. 单击该链接，进入密码重置页面。 3. 在密码重置页面中，输入与该帐户关联的电子邮件地址。 4. 点击“发送重置密码链接”按钮，向该电子邮件地址发送一封包含密码重置链接的电子邮件。 5. 打开电子邮件，单击密码重置链接，进入密码重置页面。 6. 在密码重置页面中，输入新密码，并确认密码。 7. 单击“确认”按钮，将新密码保存到用户帐户中。 请注意，密码重置链接通常只在一定时间内有效，因此用户应尽快打开电子邮件并重置密码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值