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 ...
随机推荐
- 解决ftp登录问题：500 OOPS: cannot change directory:/home/xxx 500 OOPS: child died
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
- rancherUI添加configmap
1.创建configmap 2.部署pod,挂载配置文件(通过卷的形式引用)
- 一键部署lnmp基本
#!/bin/bash systemctl stop firewalld systemctl disable firewalld setenforce 0 #--------nginx-------- ...
- VS+Qt+Halcon——显示图片，实现鼠标缩放、移动图片
摘要 本篇博文记录一下,用VS+Qt+Halcon实现对图片的读取以及鼠标缩放,移动(鼠标事件调用了halcon自带的算子)的过程.以及遇到的坑..... 先来看一下动态效果图: 主要控件: 添加一个 ...
- NOIP 模拟 $33\; \rm Defence$
题解 \(by\;zj\varphi\) 题意就是维护 \(\rm max\{01mx,01l+01r\}\) 就是最长连续的一段 \(0\),左右 \(0\) 区间的加和. 可以启发式合并,也可以直 ...
- 【AIOT】智能感知--物
From: https://liudongdong1.github.io/ 1. 物体检测 .1. 流体 D. V. Q. Rodrigues, D. Rodriguez and C. Li, &qu ...
- 带你读AI论文丨LaneNet基于实体分割的端到端车道线检测
摘要:LaneNet是一种端到端的车道线检测方法,包含 LanNet + H-Net 两个网络模型. 本文分享自华为云社区<[论文解读]LaneNet基于实体分割的端到端车道线检测>,作者 ...
- flutter添加启动图及设置启动时间
首先贴个官方的设置方法,看这里:https://flutterchina.club/assets-and-images/#%E6%9B%B4%E6%96%B0%E5%90%AF%E5%8A%A8%E9 ...
- C#协作试取消线程
https://segmentfault.com/q/1010000017109927using System; using System.Collections.Generic; using Sys ...
- MVVMLight学习笔记（二）---MVVMLight框架初探
一.MVVM分层概述 MVVM中,各个部分的职责如下: Model:负责数据实体的结构处理,与ViewModel进行交互: View:负责界面显示,与ViewModel进行数据和命令的交互: View ...