//链接数据库 <?php $link = mysqli_connect('localhost', 'root', '123456', 'stu'); mysqli_set_charset($link, 'utf8'); ?>
登录逻辑
<?php /*登录数据库验证 */ include 'conn.php'; //include 'sign.php'; $name=$_POST['name']; $password=$_POST['password']; //前面的name代表数据库中的name字段 if($name && $password) { $sql = "SELECT * FROM _zlj_test where name='$name'and password='$password'"; $result = mysqli_query($link, $sql); $num=mysqli_fetch_row($result); if($num){ echo"登录成功"; } else{ echo"该用户不存在或者账号密码错误"; } } else{ echo"用户名或密码为空"; } mysqli_close($link); ?>
注册逻辑
<?php /*登录数据库验证 */ include 'conn.php'; //include 'sign.php'; $name=$_POST['name']; $password=$_POST['password']; //前面的name代表数据库中的name字段 if($name && $password) { $sql = "SELECT * FROM _zlj_test where name='$name'and password='$password'"; $result = mysqli_query($link, $sql); $num=mysqli_fetch_row($result); if($num){ echo"登录成功"; } else{ echo"该用户不存在或者账号密码错误"; } } else{ echo"用户名或密码为空"; } mysqli_close($link); ?>
登录页面
<?php session_start(); header("Content-Type:text/html;charset=utf-8"); ?> <html> <head> <meta charset="utf-8"> <title>登录</title> <link href="B.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="box"> <h2>登录</h2> <form action="check.php" method="post" enctype="multipart/form-data"> <div class="inputBox"> <input type="text" name="name" value="" required="required" placeholder= " 请输入您的学号" title="学号为13为数字"><label>学号</label></div> <div class="inputBox"> <input type="password" name="password" value="" required="required" placeholder= " 请输入您的密码"><label>密码</label></div> <input type="submit" name="submit" value="登录" > <input type="button" onclick="window.location.href='register.php'" name="submit" value="注册" > </form> </div> </body> </html>
注册页面
<?php header("Content-Type:text/html;charset=utf-8"); ?> <html> <head> <meta charset="utf-8"> <title>注册</title> <link href="B.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="box"> <h2>注册</h2> <!--将用户输入的user,和pass提交到login.php--> <form action="checkregister.php" method="POST" enctype="multipart/form-data"> <div class="inputBox"><input type="text" name="name1" value="" required="required" placeholder= "请输入您的学号" title="学号为13为数字"><label>学号</label></div> <div class="inputBox"><input type="password" name="password1" value="" required="required" placeholder="请输入您的密码"><label>密码</label></div> <div class="inputBox"><input type="password" name="pass" value="" required="required" placeholder="请重复您的密码"><label>确认密码</label></div> <input type="submit" name="submit" value="确认注册"> <input type="button" onclick="window.location.href='sign.php'" value="返回登陆"> </form> </div> </body> </html>
css样式
body { margin: 0; padding: 0; font-family: sans-serif; /*background: url(http://dik.img.kttpdq.com/pic/2/802/3dc8ae30a4433bc8.jpg);*/ background-size: cover; } .box { position: absolute; top: 20%; left: 40%; /*上三句连在一起用*/ /*Transform属性应用于元素的2D或3D转换 transform: tranlate(-50%, -50%);*/ width: 400px; padding: 40px; background: rgba(0, 0, 0, .8); /*box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。*/ /*假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。*/ box-sizing: border-box; box-shadow: 0 15px 25px rgba(0, 0, 0, .5); border-radius: 10px; } .box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } /*相对定位和绝对定位的关系????*/ .box .inputBox { position: relative; } .box .inputBOx input { width: 100%; padding: 10px 0; font-size: 15px; color: #fff; /*letter-spacing 属性增加或减少字符间的空白(字符间距)*/ letter-spacing: 1px; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; /*背景透明*/ background: transparent; } /*图标 学号和密码*/ .box .inputBox label { position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #fff; /*CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。 其中none值能阻止点击、状态变化和鼠标指针变化: */ pointer-events: none; /*transition 属性设置元素当过渡效果*/ transition: .5s; } /*学号密码 能上下移动的关键css 焦点*/ .box .inputBox input:focus~label { top: -18px; left: 0; color: #03a9f4; font-size: 12px; } .box input[type="submit"] { background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 45px; cursor: pointer; border-radius: 5px; margin: 10px; } .box input[type="button"] { background: transparent; /*背景:全透明*/ border: none; /*边框样式*/ outline: none; color: #fff; background: #03a9f4; padding: 10px 45px; /*按钮大小*/ cursor: pointer; /*光标样式*/ border-radius: 5px; /*边框圆角*/ margin: 10px; } .box img { align: center; margin: 10px; }