标签:box none background 登录 padding 注册 10px php border
//链接数据库
<?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;
}
标签:box,none,background,登录,padding,注册,10px,php,border 来源: https://www.cnblogs.com/LiuYUE-fusheng/p/15048515.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。