概述

项目需要，于是花几天时间改站前端设计一个登录页面。页面设计首先通过html、css等语言完成，然后通过PHP调用后端数据库获取已授权用户信息，最后前端通过js的ajax调用php文件完成整个登录系统设计

效果实现

代码实现（html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);* {box-sizing: border-box;margin: 0;padding: 0;font-weight: 300;}body {font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body ::-webkit-input-placeholder {/* WebKit browsers */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}body :-moz-placeholder {/* Mozilla Firefox 4 to 18 */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body ::-moz-placeholder {/* Mozilla Firefox 19+ */font-family: 'Source Sans Pro', sans-serif;color: white;opacity: 1;font-weight: 300;}body :-ms-input-placeholder {/* Internet Explorer 10+ */font-family: 'Source Sans Pro', sans-serif;color: white;font-weight: 300;}.wrapper {background: #50a3a2;background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);position: absolute;left: 0;width: 100%;height: 100%;/*  margin-top: -200px;*/overflow: hidden;}.wrapper.form-success .container h1 {-webkit-transform: translateY(85px);transform: translateY(85px);}.container {max-width: 600px;margin: 0 auto;padding: 80px 0;padding-top:200px; height: 400px;text-align: center;}.container h1 {font-size: 40px;-webkit-transition-duration: 1s;transition-duration: 1s;-webkit-transition-timing-function: ease-in-put;transition-timing-function: ease-in-put;font-weight: 200;}form {padding: 20px 0;position: relative;z-index: 2;}form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);width: 250px;border-radius: 3px;padding: 10px 15px;margin: 0 auto 10px auto;display: block;text-align: center;font-size: 18px;color: white;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;font-weight: 300;}form input:hover {background-color: rgba(255, 255, 255, 0.4);}form input:focus {background-color: white;width: 300px;color: #53e3a6;}form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: white;border: 0;padding: 10px 15px;color: #53e3a6;border-radius: 3px;width: 125px;cursor: pointer;font-size: 18px;-webkit-transition-duration: 0.25s;transition-duration: 0.25s;}form button:hover {background-color: #f5f7f9;}.bg-bubbles {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}.bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 25s infinite;animation: square 25s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear;}.bg-bubbles li:nth-child(1) {left: 10%;}.bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s;}.bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s;}.bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25);}.bg-bubbles li:nth-child(5) {left: 70%;}.bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2);}.bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s;}.bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s;}.bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3);}.bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s;}@-webkit-keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}@keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-700px) rotate(600deg);transform: translateY(-700px) rotate(600deg);}}.cc{text-decoration: none;color: #53e3a6; }</style><script type="text/javascript">$("#login-button").click(function(event){event.preventDefault();$('form').fadeOut(500);$('.wrapper').addClass('form-success');});function check(){{if(form.username.value == "")//如果用户名为空{alert("您还没有填写用户名！");form.username.focus();return false;}if(form.password.value == "")//如果密码为空{alert("您还没有填写密码！");myform.password.focus();return false;}}</script>
</head>
<body><div class="wrapper"><div class="container"><h1>Welcome</h1><form name='form' class="form" method='post' action='login.php' onSubmit="return check()"><input type="text" placeholder="Username" name='username'><input type="password" placeholder="Password" name='password'><button type="submit" id="login-button" name='submit' value='submit'>Login</button></form></div><ul class="bg-bubbles"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
</html>

PHP文件

<?php
$username=$_POST['username'];
$password=$_POST['password'];
$link = mysqli_connect('127.0.0.1','root','123456','vultureData');
$query=mysqli_query($link,"SELECT username,password FROM webuserinfo WHERE username = '$username'");//找到与输入用户名相同的信息，注意要取出的信息有两项
$row = mysqli_fetch_array($query);
if($_POST['submit']){    if($row['username']==$username &&$row['password']==$password){//setcookie('uname',$username,time()+7200);echo "<script>alert('successfully');window.location= 'index.php';</script>";}else echo "<script>alert('failed');history.go(-1)</script>";//返回之前的页面
}
include('login.html');?>

web-登陆界面html-数据库相关推荐

仿 qq登录界面 php,js仿腾讯QQ的web登陆界面
用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个. 效果如下: 其中还实现了拖动面板,选择状态的效果下面是具体代码: ...
ENSP防火墙进入web登陆界面
步骤新建拓扑[选择USG6000V] 然后导入USG6000V得镜像包进入到防火墙的CLI界面账户与密码账户:admin 密码Admin@123(密码输入不会显示) 输入正确账户密码后会 ...
显示web服务器登陆,web服务器登陆界面
web服务器登陆界面内容精选换一换云解析服务支持为域名快速添加网站解析,通过该功能可以简化解析记录的配置,包含如下两种场景:网站解析至IP地址:为域名的主域名和子域名分别添加一条A类型记录集网站 ...
数据库课程设计——1、登陆界面
关于我用androidstudio去完成我的数据库课程设计题目:<健康管理系统> 语言:kotlin 数据库:sqlite 1.登陆界面: 用了一个线性布局,去写的登陆界面 <?x ...
【第四次实验进度博客】C#可视化登陆界面的完善以及数据库信息的完善
本周做了主要在上一周的基础上进行了完善. 1.添加登陆的验证码 2.把图片信息写入数据库并且读出 3.将密码以MD5加密的形式写入数据库 4.改善登陆界面,修改字体属性以及登陆主界面的图标等内容 5. ...
jsp实现一个简单的登陆界面（不连数据库）
基本思想 1.用户在登陆界面输入用户名和密码(设定为用户名和密码全为admin) 2.然后提交给处理jsp文件,由这个文件进行处理 3.处理完跳转到登陆成功或者失败界面 1.登陆界面 <%@ p ...
jsp 简单的登陆界面（不连数据库）
MyJsp.jsp (登陆界面) <body><form action="dologin.jsp" method="post">用户名: ...
JSP 登陆系统登陆界面/处理界面/成功界面/失败界面/注销界面（无数据库版）包含源文件分享
陆系统设计 1.程序要求: 完成用户登陆功能. 用户名及密码保存在程序之中完成验证,通过则表示用户为合法用户,跳转到登陆成功页,否则表示用户名或密码不正确,跳转到登陆失败页. 2.输出页面: 2.1. ...
web前端设计与开发大作业(三）----注册与登陆界面
一.登陆界面 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
go html vue,[终极巨坑]golang+vue开发日记【三】，登陆界面制作（二）
写在前面本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...

web-登陆界面html-数据库

概述

效果实现

代码实现（html）

web-登陆界面html-数据库相关推荐

最新文章

热门文章