文章目录
- 效果演示
- login.html
- login.php
- register.php
- 源码
- 番外
基础的环境搭建参考：
Apache安装配置(Windows和Linux)-有手就行
PHP安装配置(Windows和Linux)-一篇就够了
PHP连接MySQL-踩坑总结
效果演示
网页：http://123.56.47.42/UIUE/login.html
PHP实现登录注册效果演示
login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页title>
<link href="favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js">script>
<link type="text/css" href="css/animatemin.css" rel="stylesheet"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link type="text/css" href="css/TGTool.css" rel="stylesheet"/>
<link type="text/css" href="css/model.css" rel="stylesheet"/>
<link type="text/css" href="css/verify.css" rel="stylesheet"/>
<link type="text/css" href="css/login.css" rel="stylesheet"/>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
<script type="text/javascript" src="js/verify.js">script>
<script type="text/javascript" src="js/TGTool.js">script>
<style type="text/css">body{
background:url(images/loginBg.jpg);background-size: 100% 100%;}style>
head>
<body>
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<h4 class="modal-title" id="myModalLabel">用户注册h4>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="name_add_input" class="col-md-3 control-label">用户名label>
<div class="col-md-9">
<input type="text" class="form-control" name="name" id="name_add_input" placeholder="name">
<span class="help-block">span>
div>
div>
<div class="form-group">
<label for="password_add_input" class="col-md-3 control-label">密码label>
<div class="col-md-9">
<input type="password" class="form-control" name="password" id="password_add_input" placeholder="password">
<span class="help-block">span>
div>
div>
<div class="form-group">
<label for="password2_add_input" class="col-md-3 control-label" style="padding:0px 0px">确认密码label>
<div class="col-md-9">
<input type="password" class="form-control" name="password2" id="password2_add_input" placeholder="password again">
<span class="help-block">span>
div>
div>
div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="user_save_btn">注册button>
<button type="reset" class="btn btn-reset">重置button>
<button type="button" class="btn btn-default" id="closeBtn">关闭button>
div>
form>
div>
div>
div>
<div id="container">
<div class="col-md-4" style="font-size:30px">
<span class="label label-warning">
<span class="glyphicon glyphicon-time" aria-hidden="true">
<span id="time"><script type="text/javascript"> showTime();script>span>
span>
span>
div>
<div class="col-md-6 col-md-offset-6" style="top:20px">
<p style="font-size:75px;color: #e76f51;font-family: 楷体">
<B> 宿心B>p>
div>
<div class="col-md-4 col-md-offset-6" style="top:20px">
<I><p style="font-size:33px;color: #f4a261;font-family: 仿宋">天地之大，四海为家！p>I>
div>
