HTML+CSS登录界面，有数据库的登录验证
HTML
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>用户登录</title>
7 <link rel="stylesheet" href="CSS/login.css" />
8 </head>
9 <body>
10 <form name="user" action="LoginServlet" method="post">
11 <div class="login">
12 <h2>用户登录</h2>
13 <div class="login_box">
14 <input type="text" name="uid" id="uid" autocomplete="off"/><label>用户名</label>
15 </div>
16 <div class="login_box">
17 <input type="password" name="password" id="password" autocomplete="off"/><label>密码</label>
18 </div>
19 <a href="#" onclick="document.user.submit();return false">
20 登录
21 <span></span>
22 <span></span>
23 <span></span>
24 <span></span>
25 </a>
26 </div>
27 </form>
28 </body>
29 </html>
CSS
* {
/* 初始化 清除页面元素的内外边距 */
padding: 0;
margin: 0;
/* 盒子模型 */
box-sizing: border-box;
}
body {
/* 弹性布局 让页面元素垂直+水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 让页面始终占浏览器可视区域总高度 */
height: 100vh;
/* 背景渐变色 */
background: linear-gradient(#141e30, #243b55);
}
.login {
/* 弹性布局 让子元素称为弹性项目 */
display: flex;
/* 让弹性项目垂直排列 原理是改变弹性盒子的主轴方向 父元素就是弹性盒子 现在改变后的主轴方向是向下了 */
flex-direction: column;
/* 让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下 交叉轴的方向是与主轴垂直 交叉轴的方向是向右 */
align-items: center;
width: 400px;
padding: 40px;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}
.login h2 {
color: #fff;
margin-bottom: 30px;
}
.login .login_box {
/* 相对定位 */
position: relative;
width: 100%;
}
.login .login_box input {
/* 清除input框自带的边框和轮廓 */
outline: none;
border: none;
width: 100%;
padding: 10px 0;
margin-bottom: 30px;
color: #fff;
font-size: 16px;
border-bottom: 1px solid #fff;
/* 背景颜色为透明色 */
background-color: transparent;
}
.login .login_box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
color: #fff;
/* 这个属性的默认值是auto 默认是这个元素可以被点击 但是如果我们写了none 就是这个元素不能被点击 , 就好像它可见但是不能用 可望而不可即 */
/* 这个就是两者的区别 */
pointer-events: none;
/* 加个过渡 */
transition: all 0.5s;
}
/* :focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器 去找与input相邻的兄弟label */
/* :valid 选择器是判断input框的内容是否合法,如果合法会执行下面的属性代码,不合法就不会执行,我们刚开始写布局的时候给input框写了required 我们删掉看对比 当没有required的话input框的值就会被认为一直合法,所以一直都是下方的样式 ,但是密码不会,密码框内的值为空,那么这句话局不合法,required不能为空 当我们给密码框写点东西的时候才会执行以下代码*/
.login .login_box input:focus + label,
.login .login_box input:valid + label {
top: -20px;
color: #03e9f4;
font-size: 12px;
}
.login a {
overflow: hidden;
position: relative;
padding: 10px 20px;
color: #03e9f4;
/* 取消a表现原有的下划线 */
text-decoration: none;
/* 同样加个过渡 */
transition: all 0.5s;
}
.login a:hover {
color: #fff;
border-radius: 5px;
background-color: #03e9f4;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
.login a span {
position: absolute;
}
.login a span:first-child {
top: 0;
left: -100%;
width: 100%;
height: 2px;
/* to right 就是往右边 下面的同理 */
background: linear-gradient(to right, transparent, #03e9f4);
/* 动画 名称 时长 linear是匀速运动 infinite是无限次运动 */
animation: move1 1s linear infinite;
}
.login a span:nth-child(2) {
right: 0;
top: -100%;
width: 2px;
height: 100%;
background: linear-gradient(transparent, #03e9f4);
/* 这里多了个0.25s其实是延迟时间 */
animation: move2 1s linear 0.25s infinite;
}
.login a span:nth-child(3) {
right: -100%;
bottom: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, transparent, #03e9f4);
animation: move3 1s linear 0.5s infinite;
}
.login a span:last-child {
left: 0;
bottom: -100%;
width: 2px;
height: 100%;
background: linear-gradient(#03e9f4, transparent);
animation: move4 1s linear 0.75s infinite;
}
@keyframes move1 {
0% {
left: -100%;
}
50%,
100% {
left: 100%;
}
}
@keyframes move2 {
0% {
top: -100%;
}
50%,
100% {
top: 100%;
}
}
@keyframes move3 {
0% {
right: -100%;
}
50%,
100% {
right: 100%;
}
}
@keyframes move4 {
0% {
bottom: -100%;
}
50%,
100% {
bottom: 100%;
}
}
LoginServlet
package servlet; import java.io.IOException;
import java.sql.Connection; import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.Date; import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; /**
* Servlet implementation class UserServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub } /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date=sdf.format(new Date());
String uid=String.valueOf(request.getParameter("uid"));
String pass=String.valueOf(request.getParameter("password"));
try {
Class.forName("com.mysql.cj.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/family income and expenditure?&useSSL=false&serverTimezone=UTC";
String username="root";
String password="";
Connection conn=DriverManager.getConnection(url,username,password); String sql="select * from user_info where uid='"+uid+"'and password='"+pass+"'"; PreparedStatement ps=conn.prepareStatement(sql);
ResultSet rs=ps.executeQuery();
if(rs.next()) {
System.out.println(date+" "+uid+" "+"login");
System.out.println();
request.setAttribute("uid", uid);
request.getRequestDispatcher("index.html").forward(request,response);//登录成功
}else{
response.getWriter().write("<font style='color:red;font-size:35px'><div align='center'>"+
"用户名或密码错误！5秒后自动跳转"+"</div>"+"</font>");
response.getWriter().write("<div align='center'>"
+"如果没有发生跳转，请点"+"<a href='login.html'>"+"这里"+"</div>");
response.setHeader("refresh", "5;url=login.html");//登录失败，重新登录
}
}catch(Exception e) {
e.printStackTrace();
}finally{ }
}
}
Code
HTML+CSS登录界面，有数据库的登录验证的更多相关文章
- 37.qt quick- 高仿微信实现局域网聊天V3版本(添加登录界面、UDP校验登录、皮肤更换、3D旋转)
1.版本介绍(已上传至群里) 版本说明: 添加登录界面. UDP校验登录. 皮肤更换. 3D旋转(主界面和登录界面之间切换) . 效果图如下所示: 如果效果图加载失败,可以去哔哩哔哩 https:// ...
- servlet登录界面进行用户名和密码验证
一.建立LoginServlet项目并建立如下目录 二.在Login.html中编写登录界面代码 三.在css文件中新建login.css文件 四.在src文件中添加LoginServlet.java ...
- 一步一步学习IdentityServer4 (3)自定登录界面并实现业务登录操作
IdentityServer4 相对 IdentityServer3 在界面上要简单一些,拷贝demo基本就能搞定,做样式修改就行了 之前的文章已经有登录Idr4服务端操作了,新建了一个自己的站点 L ...
- jquery自己主动旋转的登录界面的背景代码登录页背景图
在其他网站上看到比较爽Web登录界面.背景图片可以自己主动旋转. 介绍给大家.有兴趣的可以改改下来作为自己的系统登录界面. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY ...
- Ubuntu登录界面添加root用户登录选项
1.普通用户登录系统并打开终端 配置root密码 $sudo passwd 切换至root用户 $su root 输入密码 修改以下配置文件 $nano /usr/share/lightdm/ligh ...
- Centos启动时停止在登录界面但不显示登录信息（一直在转圈）
进入单用户模式 执行 iscsiadm -m node -o delete,然后reboot
- JavaWeb连接SQLServer数据库并完成一个登录界面及其功能设计。
一.JDBC连接SQLserver数据库的步骤: 1.下载SQLserver的JDBC驱动文件——Microsoft JDBC Driver 4.0 for SQL Server 2.例如下载得到的文 ...
- swift项目实战--微博的未登录界面的实现,和监听未登录界面两个按钮的两种实现方法
1.未登录界面的实现 微博项目中,用户不登录的话,显示的是未登录的界面.项目中TabBarVC的子控制器都是tableViewVC,所以抽取了父类,让父类判断用户是否登录,决定显示什么样的界面.loa ...
- 30分钟搞定后台登录界面（103个后台PSD源文件、素材网站）
去年八月时要做一个OA系统为了后台界面而烦恼,后来写了一篇博客(<后台管理UI的选择>)介绍了选择过程与常用后台UI,令我想不到的时竟然有许多开发者与我一样都为这个事情而花费不少时间,最后 ...
- 使用Axure RP原型设计实践03,制作一个登录界面的原型
本篇体验做一个登录界面的原型. 登录页 首先在Page Style里为页面设置背景色. 如果想在页面中加图片,就把Image部件拖入页面,并设置x和y轴.双击页面中的Image部件可以导入图片.在Im ...
随机推荐
- [TensorFlow2.0]-Fashion-MNIST本地数据集及fit_generator()的使用
本人人工智能初学者,现在在学习TensorFlow2.0,对一些学习内容做一下笔记.笔记中,有些内容理解可能较为肤浅.有偏差等,各位在阅读时如有发现问题,请评论或者邮箱(右侧边栏有邮箱地址)提醒. 若 ...
- 如何在idea中配置Tomcat服务器
.IDEA 中动态 web 工程的操作 a)IDEA 中如何创建动态 web 工程 1.创建一个新模块: 2.选择你要创建什么类型的模块 3.输入你的模块名,点击[Fin ...
- 响应式编程基础教程：Spring Boot 与 Lettuce 整合
本文主要介绍响应式编程访问 Redis,以及 Spring Boot 与 Lettuce 的整合使用. Lettuce 是可扩展性线程安全的 Redis 客户端,用于同步.异步和响应式使用.如果多个线 ...
- rabbitMQ通过@RabbitListener和配置文件XML创建exchange及队列绑定关系
1.@RabbitListener 2.配置文件 <rabbit:fanout-exchange name="fanoutExchange" xmlns="http ...
- 【笔记】Jupyter notebook 高级 魔法命令
魔法命令 %run 可以调用自己编写的代码 代码内容 使用结果 测试时间有%timeit,%time %timeit 测试时间(生成表达式的逻辑) 测试次数是可以不定义的,有系统自己决定 算法复杂度可 ...
- .NET第三方补丁工具(Visual Patch)常用手册
SetupFactory简介 这是Indigo Rose(蓝玫瑰)公司开发的一套打包-补丁解决方案的补丁工具,相比Setup Factory,他的知名度似乎不太高,网上也很少找到相关资料,但是真的很简 ...
- noip8
T1 星际旅行 考试时觉得是道数学题,但没想到忘了欧拉路. 首先将每条边都拆成两条边,那么题目就变成了任意删掉两条边,使得新的图中存在欧拉路.设 \(sum\) 表示自环的数量, \(du_{i}\) ...
- 真.OI宝典
记得取模%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ...
- 题解 Defence
传送门 发现最少次数只和最左,最右及中间最长的全0段有关 本来想启发式合并,结果发现直接线段树合并搭配一个类似山海经的方法就可以过了 yysy,线段树单次合并的具体复杂度并不是 \(O(logn)\) ...
- js判断对象的某个属性是否存在
参考:https://www.jb51.net/article/141994.htm 原始数据, [ {"name":"向阳镇","id": ...