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 ...
随机推荐
- sqli-labs lesson5-6 布尔盲注 报错注入 延时注入
LESSON 5: 典型的布尔盲注. 盲注:sql注入过程中,sql语句的执行结果不回显到前端,这个时候就只能用一些别的方法进行判断或者尝试,这个判断或者尝试就叫做盲注.盲注又分为:1.基于布尔SQL ...
- DVWA靶场之XSS（Stored）通关
Low: <?php if( isset( $_POST[ 'btnSign' ] ) ) { // Get input $message = trim( $_POST[ 'mtxMessage ...
- STM32—SPI读写FLASH
目录 FLASH简介 W25Q64 W25Q64简介 FLASH控制指令 FLASH内部存储结构 代码讲解 读取芯片ID 发送写使能信号 等待FLASH不忙 擦除扇区 写入数据 读取数据 注 FLAS ...
- Oracle 数据库的导入与导出
1.导入 打开cmd,用管理员登录:sqlplussys as sysdba密码不用输: 创建表空间:create tablespace tablespaceName datafile 'E:\tab ...
- Linux搭建Ldap服务器
一,服务器安装 yum install -y openldap openldap-clients openldap-servers migrationtools 二,配置ldap服务器 2.1配置ld ...
- noip21
所以分差到底要不要取绝对值啊 T1 3分钟出暴力,十分钟码好,然后样例过不去... 好吧,我是sb,求中位数之前是要排序的. 直接冲暴力,50pts. \(w=3\) 的点,开个桶记录一下又有20pt ...
- 【开发工具】idea常用配置
1. 设置鼠标滚轮修改字体大小 我们可以勾选此设置后,增加Ctrl + 鼠标滚轮 快捷键来控制代码字体大小显示. 2. 设置鼠标悬浮提示 3. 设置自动导包功能 Add unambiguous im ...
- flink双流join
package com.streamingjoin import org.apache.flink.api.common.state.{ValueState, ValueStateDescriptor ...
- Python也可以拥有延迟函数
延迟函数defer 我们知道在Golang中有一个关键字defer,用它来声明在函数调用前,会让函数*延迟**到外部函数退出时再执行,注意,这里的退出含义:函数return返回或者函数panic退出 ...
- Supervisor服务开机自启动
要解决的问题 在机器上部署自己编写的服务时候,我们可以使用Supervisor作为进程检活工具,用来自动重启服务. 但是当机器重启后,Supervisor却不能自动重启,那么谁来解决这个问题呢? 答案 ...