PHP login registration front-end layout
Let’s look at the following login registration, as shown in the figure below:
First we create a login.php file
The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登录与注册 </title> </head> <body> <div id="div"> <h3>欢迎登陆后台管理系统</h3> <div id="cnt"> <form method="post" action="main.php"> 用户名：<input type="text" placeholder="请输入用户名" name="username"> <br><br> 密 码：<input type="password" placeholder="请输入用户名" name="password"> <br><br> <input type="submit" value="登录" class="sub"> <input type="button" value="注册" class="sub" id="sub"> </form> </div> </div> </body> </html>
Such a page looks a bit unsightly, so we have to write css
css can be placed externally or internally
Let’s create a style.css file, this file stores our css code:
The code is as follows:
*{margin: 0px;padding: 0px;}
body{
background-image:url(image/4.jpg);
}
#div{width:300px;height:400px;
background:#B1FEF9;margin:0 auto;margin-top:150px;
border-radius:20px;
}
h3{margin-left:48px;padding-top:60px;}
h4{margin-left:120px;padding-top:60px;font-size: 18px;}
#cnt{width:280px;height:370px;margin-left:33px;padding-top:60px;}
.sub{width:70px;height:30px;border:1px solid #fff;background:#eee;
margin-left:28px;margin-top:20px;}
.sub1{
width:70px;height:30px;border:1px solid #fff;
background:#eee;margin-left:150px;margin-top:20px;
}When we create the css file, our login.php file needs to introduce the style
<link rel="stylesheet" type="text/css" href="style.css">
Look at our login.php file below, click the login button to jump Go to main.php But there is no response when you click the button, because we need script events to achieve the desired effect on the button button. Let's look at the following script code. First, introduce the jQuery file
< script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
Then let’s write the jquery code
<script>
$("#sub").click(function(){
location.href="reg.php";
});
</script>This code is also very simple. When the button click event occurs, it jumps to the reg page, so that we can jump to the registered page
Through the above code, we achieve the effect:
Click on the registration page and jump to reg.php
The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php 登录与注册 </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="div"> <h4>会员注册</h4> <div id="cnt"> <form method="post" action="regin.php"> 用户名：<input type="text" placeholder="请输入用户名" name="username"> <br><br> 密码：<input type="password" placeholder="请输入密码" name="password"> <br><br> <input type="submit" value="注册" class="sub1"> </form> </div> </div> </body> </html>
The reg.php page is as shown below
We will operate the database in the next chapter
