编辑器 使用的phpstrom, 环境使用的 xampp
前段掌握并不熟练,引用了jQuery和bootstrap
目录
主页
数据库连接conn.php
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/12/10
* Time: 21:24
*/
$conn= mysqli_connect('localhost','root','','user');
mysqli_set_charset($conn,'utf8');
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
body{
text-align:center;
margin-left:auto;
margin-right:auto;
}
#right {
position: relative;
left: 25%;
top: 35px;
float: contour;
}
.log{
color: white;
}
#login{
position: absolute;
top: 38%;
left: 46.5%;
float: left}
#font1{
color: white;
font-family: 微软雅黑;
}
</style>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="Bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="right">
<!-- Button trigger modal -->
<a class="log" href="" onclick="" data-toggle="modal" data-target="#myModal">登录</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">用户登录</h4>
</div>
<div class="modal-body">
用户名:<input class="username" type="text" name="username"><br>
<br>
密 码:<input class="userpwd" type="password" name="userpwd">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="f()">提交</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<a class="log" href="" onclick="" data-toggle="modal" data-target="#myModa2">注册</a>
<!-- Modal -->
<div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabe2">用户注册</h4>
</div>
<div class="modal-body">
用户名:<input class="rename" type="text" name="username"><br>
<br>
密 码:<input class="repwd" type="password" name="userpwd"><br>
<br>
邮 箱:<input class="reemail" type="text" name="useremail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="s()">提交</button>
</div>
<