超级可爱的登录页面（html+css+js）

ps：前端嫩牛，技术肯定不如大牛，如果有什么不足的地方，请您提出宝贵的意见，感谢！

一、作品介绍

本作品是我独立完成的一个个人网站的登录页面，实现了动态透明输入框、背景图自适应浏览器窗口、模拟登录验证、验证错误提示等功能。

1、主要技术：HTML、CSS、jQuery
2、主页面

3、验证错误提示
错误类型不一样，提示文字也不一样，这里举例说明未输入用户名和密码的情况

二、代码部分

1、html 代码( login.html )

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录界面</title><link rel="stylesheet" type="text/css" href="css/login.css" /></head><body><p class="wel">Welcome to my personal website.</p><!-- 登录表单 --><form class="login"  method="post"><h1>Login</h1><input type="text" name="username" id="username" placeholder="Username"  autocomplete="off" /><input type="password" name="password" id="password" placeholder="Password"  /><!--验证错误提示--><div id="error"></div><input type="button" name="sub" id="sub" value="Login" /></form>/* js 代码比较少，没必要写成单独的js文件 */<script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">/******************* 本地模拟登录验证 *******************/$(".login #sub")[0].onclick = function() {var user = $(".login  #username")[0].value; //获取 username 的输入值var pass = $(".login  #password")[0].value; 获取 password 的输入值if(user == '123' && pass == 123) {window.location.href = "https://www.baidu.com/";} else if(user == '' || pass == '') {$("#error").text("*账号或密码不能为空");} else {$("#error").text("*账号或密码有误，请重新输入");}}//点击 username 和 password 输入框时，清除错误提示$(".login #username")[0].onclick = function() {$("#error").text('');}$(".login #password")[0].onclick = function() {$("#error").text('');}</script></body></html>

2、css 代码( login.css )

html {height: 100%;
}/* 背景图片样式 */
body {margin: 0;padding: 0;background-image: url(../images/bg.gif);background-size: 100% 100%;}/* Welcome to my personal website. 样式 */
.wel {color: rgba(255,255,255,.7);font-size: 50px;text-align: center;
}/* 登录区域样式 */
.login {width: 300px;padding: 10px 40px 5px 40px;top: 30%;left: 10%;background: rgba(255,255,255,.2);  /*实现半透明效果 */box-shadow: 15px 15px 25px rgba(255,255,255,.5); /* 实现盒子阴影效果 */border-radius: 50%;  /* 圆形 */text-align: center;position: fixed;  /* 固定定位 */
}/* Login 字体样式 */
.login h1 {color: rgba(255,255,255,.7);text-transform: uppercase;font-weight: 600;
}/* 登录输入框样式 */
.login #username,
#password {border: 0;background: none;display: block;font-size: 18px;margin: 20px auto;text-align: center;border: 2px solid rgba(255,255,255,.5);  /* 边框属性 */padding: 14px 10px;width: 200px;outline: none;color: rgba(255,255,255,.5);  /* 字体颜色 */border-radius: 24px;transform: 0.25s; /* 动画时间 */
}
/* 点击到输入框时，输入框的样式 */
.login #username:focus, #password:focus {width: 240px;
}/* 错误提示样式 */
.login #error {width: 100%;height: 20px;color: red;
}/* login登录按钮样式 */
.login #sub {background: none;display: block;font-size: 18px;margin: 20px auto;text-align: center;border: 2px solid rgba(255,255,255,.5);padding: 14px 30px;outline: none;color: rgba(255,255,255,.5);border-radius: 24px;cursor: pointer;  /* 光标移动到Login按钮时，变成小手形状 */
}/* 鼠标移入到登录按钮的样式 */
.login #sub:hover {background-color: skyblue;
}

超级可爱的登录页面（html+css+js）相关推荐

有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
【HTML5网页期末作业】基于HTML+CSS+JS实现宠物网站，表单展示登录页面，带JS密码验证
注册登录页面代码用js判断是否填入信息_php实现登录功能
原文:https://blog.csdn.net/ccy1995414/article/details/80638685 自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么 ...
注册登录页面代码用js判断是否填入信息_微信小程序快速开发：从注册账号到小程序上架
写在前面自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习.大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似? ...
注册登录页面代码用js判断是否填入信息_(实战)Node.js 实现抢票小工具amp;amp;短信通知提醒...
作者:西岚本文经作者 @西岚授权分享,文末点击阅读原文可跳转原文查看. 写在前言要知道在深圳上班是非常痛苦的事情,特别是我上班的科兴科技园这一块,去的人非常多,每天上班跟春运一样,如果我能换到以 ...
注册登录页面代码用js判断是否填入信息_(实战)Node.js 实现抢票小工具amp;短信通知提醒...
作者:西岚 https://juejin.im/post/5dadd0236fb9a04de04d968e 写在前言要知道在深圳上班是非常痛苦的事情,特别是我上班的科兴科技园这一块,去的人非常多,每 ...

超级可爱的登录页面（html+css+js）

一、作品介绍

二、代码部分

超级可爱的登录页面（html+css+js）相关推荐

最新文章

热门文章