返回登入界面
代码：
登录失败
返回登入界面
点击修改密码
这里我们点击运行看看效果
这里我们用两个升级 大装备（html）(css) 来美化一下我们的页面，这里我们页面美化的，用的是这位大佬的页面（博主名为键盘奏鸣曲），大家可以来看看，点击链接
HTML 代码
123登录
CSS 代码
/*.center{*//*text-align:center;*//*margin-top: 50px;*//*}*/.fon{font-size: 40px;}/*body{*//*background: url("images/image-2.jpg") no-repeat 0 0;*//*background-size: 100% 100%;*//*text-decoration:none;*//*}*//*input {*//*background-color: transparent;*//*outline: none;*//*color: black;*//*}*//*.clear{*//*opacity:0.3;*//*}*/* {margin: 0;padding: 0;box-sizing: border-box;}/* 使用flex布局，让内容垂直和水平居中 */section {/* 相对定位 */position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;min-height: 100vh;/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */background: linear-gradient(to bottom, #f1f4f9, #dff1ff);}/* 背景颜色 */section .color {/* 绝对定位 */position: absolute;/* 使用filter(滤镜) 属性，给图像设置高斯模糊*/filter: blur(200px);}/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */section .color:nth-child(1) {top: -350px;width: 600px;height: 600px;background: #ff359b;}section .color:nth-child(2) {bottom: -150px;left: 100px;width: 500px;height: 500px;background: #fffd87;}section .color:nth-child(3) {bottom: 50px;right: 100px;width: 500px;height: 500px;background: #00d2ff;}.box {position: relative;}/* 背景圆样式 */.box .circle {position: absolute;background: rgba(255, 255, 255, 0.1);/* backdrop-filter属性为一个元素后面区域添加模糊效果 */backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);border-radius: 50%;/* 使用filter(滤镜) 属性，改变颜色 。hue-rotate(deg)给图像应用色相旋转calc() 函数用于动态计算长度值var() 函数调用自定义的CSS属性值x*/filter: hue-rotate(calc(var(--x) * 70deg));/* 调用动画animate，需要10s完成动画，linear表示动画从头到尾的速度是相同的，infinite指定动画应该循环播放无限次*/animation: animate 10s linear infinite;/* 动态计算动画延迟几秒播放 */animation-delay: calc(var(--x) * -1s);}/* 背景圆动画 */@keyframes animate {0%, 100% {transform: translateY(-50px);}50% {transform: translateY(50px);}}.box .circle:nth-child(1) {top: -50px;right: -60px;width: 100px;height: 100px;}.box .circle:nth-child(2) {top: 150px;left: -100px;width: 120px;height: 120px;z-index: 2;}.box .circle:nth-child(3) {bottom: 50px;right: -60px;width: 80px;height: 80px;z-index: 2;}.box .circle:nth-child(4) {bottom: -80px;left: 100px;width: 60px;height: 60px;}.box .circle:nth-child(5) {top: -80px;left: 140px;width: 60px;height: 60px;}/* 登录框样式 */.container {position: relative;width: 400px;min-height: 400px;background: rgba(255, 255, 255, 0.1);display: flex;justify-content: center;align-items: center;backdrop-filter: blur(5px);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);}.form {position: relative;width: 100%;height: 100%;padding: 50px;}/* 登录标题样式 */.form h2 {text-align: center;position: relative;color: #fff;font-size: 40px;font-weight: 600;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;}.form h2 h22 {top: -40px;text-align: center;position: relative;color: #fff;font-size: 40px;font-weight: 600;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;}.form .a1, .form p1 {bottom: -90px;left: 50px;position: relative;color: #fff;font-size: 18px;font-weight: 600;letter-spacing: 5px;/*margin-bottom: 10px;*/cursor: pointer;text-decoration: none;}.form p1 a{position: relative;color: #fff;font-size: 18px;font-weight: 600;letter-spacing: 5px;/*margin-bottom: 10px;*/cursor: pointer;text-decoration: none;}.form fon {top: -30px;left: 30px;position: relative;color: #fff;font-size: 28px;font-weight: 600;letter-spacing: 5px;margin-bottom: 30px;cursor: pointer;}/* 登录标题的下划线样式 */.form h2::before {content: "";position: absolute;left: 0;bottom: -10px;width: 0px;height: 3px;background: #fff;transition: 0.5s;}.form h2 h22::before {content: "";position: absolute;/*left: 0;*//*bottom: -10px;*//*width: 0px;*//*height: 3px;*//*background: #fff;*//*transition: 0.5s;*/}.form h2:hover:before {width: 53px;}.form .inputBox {width: 100%;margin-top: 20px;}/* 输入框样式 */.form .inputBox input {width: 100%;padding: 10px 20px;background: rgba(255, 255, 255, 0.2);outline: none;border: none;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.5);border-right: 1px solid rgba(255, 255, 255, 0.2);border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 16px;letter-spacing: 1px;color: #fff;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}.form .inputBox input::placeholder {color: #fff;}/* 登录按钮样式 */.form .inputBox input[type="submit"],.form .inputBox input[type="reset"]{background: #fff;color: #666;max-width: 100%;margin-bottom: 20px;font-weight: 600;cursor: pointer;}.forget {margin-top: 6px;color: #fff;letter-spacing: 1px;}.forget a {color: #fff;font-weight: 600;text-decoration: none;}
- 图技术在 LLM 下的应用：知识图谱驱动的大语言模型 Llama Index
- 蔬菜清洗常用的杀菌剂有哪些，哪种是最安全的？
- 冬天怎样泡脚去湿气,冬天湿气重 怎么祛湿
- 冬天用的防晒霜,冬天用防晒霜吗
- 冬天用塑料袋套花图片,东北 冬天用塑料袋包着单反可以吗
- 同治皇帝载淳靠寻欢作乐是用来减压吗
- 人能多久不进食？412斤狠人小伙用行动告诉你，是382天！ 吉尼斯记录禁食
- 冠道1.5动力口碑,冠道1.5动力够用吗？
- 马斯克隧道挖掘公司可能获新生意：以色列拟用隧道解决交通问题
- 屡战屡败的夏侯惇却为何还能受到曹操的重用？