©2020-2024 ioDraw All rights reserved
<> register （html）
<!DOCTYPE html> <html> <head> <title> register </title> <link rel="stylesheet" href="
register.css"> <meta name="content-type"; charset="UTF-8"> <style> body { margin
: 0; padding: 0; /* Elastic layout Make page elements vertical + horizontally */ display: flex; justify-content: center;
align-items: center; /* Make the page always occupy the total height of the visible area of the browser */ height: 100vh; position: absolute;
flex-direction: column; background-color: red; flex: 1; width: 100%; height:
100%; background: url(WOW.jpg) no-repeat; background-size:100% 100%;
background-attachment:fixed; } .bigBox { margin: 0 auto; /* login Box play */
margin-top: 0; /* login Distance between frame and top */ padding: 20px 50px; /*
login Distance inside the frame ( Internal distance from input box and button ) */ background-color: #00000090; /* login Box background color and transparency */
width: 400px; height: 500px; border-radius: 10px; /* Fillet edge */ text-align: center;
/* All contents in the box */ } .bigBox h1 { color: white; /* LOGIN Font color */ font-family: "Comic
Sans MS"; } .bigBox .loginButton { margin-right: 30px; margin-top: 20px; /*
Distance from the top of the button to the input box */ margin-bottom: 20px; width: 100px; height: 25px; color: white;
/* Button font color */ border: 0; /* Delete button border */ border-radius: 20px; /* Button fillet edge */
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%,
#cf6cc9 33%, #ee609c 66%, #ee609c 100%); /* Button color */ } .m-left{ margin-left: 40px
; } .m-plc{ margin-right: 30px; margin-top: 30px; } .bigBox .login_box { /*
Relative positioning */ position: relative; width: 100%; } .bigBox .login_box input{
/* eliminate input Frame and outline */ outline: none; border: none; width: 100%; padding: 10px 0;
margin-bottom: 30px; color: #fff; font-size: 16px; border-bottom: 1px solid #fff
; /* The background color is transparent */ background-color: transparent; } .bigBox .login_box label{
position:absolute; top: 0 ; left: 0; padding: 10px 0; color: #fff;
/* The default value of this property is auto The default is that this element can be clicked But if we write none This element cannot be clicked , It's like it's visible, but it doesn't work Beyond reach */
/* This is the difference between the two */ pointer-events: none; /* Add an excess */ transition: all 0.5s; } /*: focus
Selector is when input Getting focus is the triggered style + Is an adjacent sibling selector Find and input Neighboring brothers label*/ /*：valid Selector is judgment input
Is the content of the box legal , If it is legal, the following attribute code will be executed , If it is illegal, it will not be implemented , When we first started to write the layout input The box is written required Let's delete it and see the comparison
When not required Words input The value of the box will be considered legal all the time , So it's always the style below ,
But the password won't , The value of the password box is empty , Then this sentence is illegal ,required Cannot be empty When we write something to the password box, we will execute the following code */ .bigBox
.login_box input:focus + label, .bigBox .login_box input:valid + label{ top:
-20px; color: #f509e1; font-size: 12px; } .b a{ /*overflow: hidden;*/ position:
relative; padding: 5px 15px; color: #fff; /* cancel a Show original underline */ text-decoration: none;
/* Also add a transition */ transition: all 0.5s; } .b a:hover { color: #fff; border-radius: 15px
; background-color: #c8f407; box-shadow: 0 0 5px #c8f407,0 0 25px #c8f407,0 0
50px #c8f407,0 0 100px #c8f407; } .b a span{ position: absolute; } .b a
span:first-child { top: 0; left: -100%; width: 100%; height: 2px; /*to right
Just to the right The following is the same */ background: linear-gradient(to right,transparent,#c8f407); /* animation
name duration linear It's uniform motion infinite It's an infinite number of motions */ animation: move1 1s linear infinite; } .b a
span:nth-child(2){ right: 0; top: -100%; width: 2px; height: 100%; background:
linear-gradient(transparent,#c8f407); /* There's one more here 0.25s It's actually a delay time */ animation: move2 1s
linear 0.25s infinite; } .b a span:nth-child(3){ right: -100%; bottom: 0; width:
100%; height: 2px; background: linear-gradient(to left,transparent,#c8f407);
animation: move3 1s linear 0.5s infinite; } .b a span:last-child{ left: 0;
bottom: -100%; width: 2px; height: 100%; background: linear-gradient(#c8f407,
transparent); animation: move4 1s linear 0.75s infinite; } /* Write an animation */ @keyframes
move1{ 0%{ left: -100%; } 50%, 100%{ left: 100%; } } @keyframes move2{ 0%{ top:
-100%; } 50%, 100%{ top: 100%; } } @keyframes move3{ 0%{ right: -100%; } 50%,
100%{ right: 100%; } } @keyframes move4{ 0%{ bottom: -100%; } 50%, 100%{ bottom:
100%; } } .m-left{ margin-left: 30px; } </style> </head> <body> <div class="
bigBox"> <h1> Registration page </h1> <form action=" register 2.php" method="post"> <div class="
login_box"> <input type="text" name='Username' id='Username' required /> <label
for="name" >Username</label> </div> <div class="login_box"> <input type="
password" name='Password' id='Password' required="required"> <label for="pwd">
Password</label> </div> <div class="login_box"> <input type="password" id="
Re_Password" name="Re_Password" required="required"> <label for="rpwd">
Re_Password</label> </div> <div class="login_box"> <input type="password" id="
Code" name="Code" size="4" required="required"> <label for="yzm">Code</label> <a
href="javascript:void(0)" onclick="document.getElementById('captcha_img').src='
Verification Code .php?r='+Math.random()"> <img id="captcha_img" border='1' src='
Verification Code .php?r=echo rand(); ?>' style="width:90px; height:30px" /> </a></div> <div
style="color: white;font-size: 12px" > <!-- Prompt information --> </div> <div> <input type="
submit" id="register" name="register" value=" register " class="loginButton m-left"> <
input type="reset" id="reset" name="reset" value=" Reset " class="loginButton"> </div
> <div class="b"> <a href=" Sign in 1.php"> Existing account , Log in <span></span> <span></span> <span>
</span> <span></span> </a> </form> </div> </body> </html>
<> register （php）
<?php header("Content-type:text/html;charset=utf-8"); $link = mysqli_connect(
'localhost','root',''); mysqli_set_charset($link,'utf8'); // Set character set
mysqli_select_db($link,'login'); $name=$_POST['Username']; $pwd=$_POST[
'Password']; $rpwd=$_POST['Re_Password']; $code = $_POST['Code']; if (!$link) {
die(" connection failed : " .mysqli_connect_error()); } else if(strlen($pwd) < 5||strlen($pwd)>
10){ echo"<script>alert(' Your password needs 5~10 position ');window.location.href=' register 1.php'</script>";
exit; } else if($rpwd != $pwd){ echo
"<script>alert(' The two passwords you entered do not match , Please re-enter ');window.location.href=' register 1.php'</script>";
exit; } else{ $sql="insert into user(name, password)values('$name','$pwd')"; }
// call mysqli of query method if(!(mysqli_query($link,$sql))){ echo
"<script>alert(' login has failed ');window.location.href=' register 1.php'</script>"; }else{ echo
"<script>alert(' login was successful ');window.location.href=' Sign in 1.php'</script>"; } ?> ```<?php
header("Content-type:text/html;charset=utf-8"); $link = mysqli_connect(
'localhost','root',''); mysqli_set_charset($link,'utf8'); // Set character set
mysqli_select_db($link,'login'); $name=$_POST['Username']; $pwd=$_POST[
'Password']; $rpwd=$_POST['Re_Password']; $code = $_POST['Code']; if (!$link) {
die(" connection failed : " .mysqli_connect_error()); } else if(strlen($pwd) < 5||strlen($pwd)>
10){ echo"<script>alert(' Your password needs 5~10 position ');window.location.href=' register 1.php'</script>";
exit; } else if($rpwd != $pwd){ echo
"<script>alert(' The two passwords you entered do not match , Please re-enter ');window.location.href=' register 1.php'</script>";
exit; } else{ $sql="insert into user(name, password)values('$name','$pwd')"; }
// call mysqli of query method if(!(mysqli_query($link,$sql))){ echo
"<script>alert(' login has failed ');window.location.href=' register 1.php'</script>"; }else{ echo
"<script>alert(' login was successful ');window.location.href=' Sign in 1.php'</script>"; } ?>
<> Sign in （html）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name=
"viewport" content="width=device-width,initial-scale=1.0" /> <title> User login </title>
<link rel="stylesheet" href="index_log.css" /> <style> *{ /* initialization Clear the inside and outside margins of page elements */
padding: 0; margin: 0; /* Box model */ box-sizing: border-box; } body { /* Elastic layout
Make page elements vertical + horizontally */ display: flex; justify-content: center; align-items: center;
/* Make the page always occupy the total height of the visible area of the browser */ height: 100vh; position: absolute; flex-direction: column;
background-color: red; flex: 1; width: 100%; height: 100%; background: url(
WOW.jpg) no-repeat; background-size:100% 100%; background-attachment:fixed; }
.login{ margin: 0 auto; /* login Box play */ margin-top: 0; /* login Distance between frame and top */ padding
: 20px 50px; /* login Distance inside the frame ( Internal distance from input box and button ) */ background-color: #00000090; /*
login Box background color and transparency */ width: 400px; height: 350px; border-radius: 10px; /* Fillet edge */
text-align: center; /* All contents in the box */ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); }
.login h1{ color: #fff; margin-bottom: 30px; } .login .login_box { /* Relative positioning */
position: relative; width: 100%; } .login .login_box input{ /* eliminate input Frame and outline */
outline: none; border: none; width: 100%; padding: 10px 0; margin-bottom: 30px;
color: #ffffff; font-size: 16px; border-bottom: 1px solid #fff; /* The background color is transparent */
background-color: transparent; } .login .login_box label{ position:absolute; top
: 0 ; left: 0; padding: 10px 0; color: #fff; /* The default value of this property is auto The default is that this element can be clicked
But if we write none This element cannot be clicked , It's like it's visible, but it doesn't work Beyond reach */ /* This is the difference between the two */ pointer-events: none
; /* Add an excess */ transition: all 0.5s; } /*: focus Selector is when input Getting focus is the triggered style + Is an adjacent sibling selector
Find and input Neighboring brothers label*/ /*：valid Selector is judgment input Is the content of the box legal , If it is legal, the following attribute code will be executed ,
If it is illegal, it will not be implemented , When we first started to write the layout input The box is written required Let's delete it and see the comparison When not required Words
input The value of the box will be considered legal all the time , So it's always the style below , But the password won't , The value of the password box is empty , Then this sentence is illegal ,required Cannot be empty
When we write something to the password box, we will execute the following code */ .login .login_box input:focus + label, .login
.login_box input:valid + label{ top: -20px; color: #f509e1; font-size: 12px; }
.b a{ /*overflow: hidden;*/ position: relative; padding: 5px 15px; color: #fff;
/* cancel a Show original underline */ text-decoration: none; /* Also add a transition */ transition: all 0.5s; } .b
a:hover { color: #fff; border-radius: 15px; background-color: #c8f407;
box-shadow: 0 0 5px #c8f407,0 0 25px #c8f407,0 0 50px #c8f407,0 0 100px #c8f407;
} .b a span{ position: absolute; } .b a span:first-child { top: 0; left: -100%;
width: 100%; height: 2px; /*to right Just to the right The following is the same */ background: linear-gradient(
to right,transparent,#c8f407); /* animation name duration linear It's uniform motion infinite It's an infinite number of motions */ animation
: move1 1s linear infinite; } .b a span:nth-child(2){ right: 0; top: -100%;
width: 2px; height: 100%; background: linear-gradient(transparent,#c8f407);
/* There's one more here 0.25s It's actually a delay time */ animation: move2 1s linear 0.25s infinite; } .b a
span:nth-child(3){ right: -100%; bottom: 0; width: 100%; height: 2px; background
: linear-gradient(to left,transparent,#c8f407); animation: move3 1s linear 0.5s
infinite; } .b a span:last-child{ left: 0; bottom: -100%; width: 2px; height:
100%; background: linear-gradient(#c8f407,transparent); animation: move4 1s
linear 0.75s infinite; } /* Write an animation */ @keyframes move1{ 0%{ left: -100%; } 50%,
100%{ left: 100%; } } @keyframes move2{ 0%{ top: -100%; } 50%, 100%{ top: 100%;
} } @keyframes move3{ 0%{ right: -100%; } 50%, 100%{ right: 100%; } } @keyframes
move4{ 0%{ bottom: -100%; } 50%, 100%{ bottom: 100%; } } .m-left{ margin-left:
30px; } .loginButton { line-height: 25px; /* set up line-height And rongqi of height equal */
text-align: center; margin-right: 30px; margin-top: 10px; /* Distance from the top of the button to the input box */
margin-bottom: 30px; width: 100px; height: 25px; color: white; /* Button font color */
border: 0; /* Delete button border */ border-radius: 20px; /* Button fillet edge */ background-image:
linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%,
#ee609c 66%, #ee609c 100%); /* Button color */ } .register{ position: absolute; right:
10px; color: #ffffff; /*left: calc(5% - 200px);*/ /* bottom: 200px; */ font-size
: 13px; margin-bottom: 10px; } .c{ background-color: #00000090; color: #fff;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4); } .b{ margin-bottom: 20px; } </style
> </head> <body> <div class="login"> <h1> User login </h1> <form action=" land 2.php" method
="post"> <div class="login_box"> <input type="text" name='Username' id='Username
' required /> <label for="Username" >Username</label> </div> <div class="
login_box"> <input type="password" name='Password' id='Password' required="
required"> <label for="Password">Password</label> </div> <div class="b"> <a href
=" register 1.php"> Registered account <span></span> <span></span> <span></span> <span></span> </a> </
div> <div class="regiter"> <a href=" register 1.php"><input type="submit" id="regiter"
name="login" value=" Sign in " class="loginButton m-left"></a> </div> </div> </body> </
html>
<> Sign in （php）
<?php header("Content-type:text/html;charset=utf-8"); $link = mysqli_connect(
'localhost','root',''); mysqli_set_charset($link,'utf8'); // Set character set
mysqli_select_db($link,'login'); $name=$_POST['Username']; $pwd=$_POST[
'Password']; if (!$link) { die(" connection failed : " .mysqli_connect_error()); }
// Check whether the user name and password exist in the database $sql = "select name,password from user where name='$name'
and password='$pwd'"; $result=mysqli_query($link, $sql); $row =
mysqli_fetch_array($result,MYSQLI_BOTH); $number = mysqli_num_rows($result); if(
$number){ echo "<script>alert(' Login successful ');location=' Sign in 1.php'</script>"; } else{ echo
"<script>alert(' The user name you entered does not exist ');location=' Sign in 1.php'</script>"; exit; } ?>
<> Verification Code (php)
<?php ini_set('display_errors','off'); //11> set up session, Must be at the top of the script session_start()
; $image = imagecreatetruecolor(100, 30); //1> Function to set the picture size of verification code //5> Set verification code color
imagecolorallocate(int im, int red, int green, int blue); $bgcolor =
imagecolorallocate($image,255,255,255); //#ffffff //6> Area filling int imagefill(int
im, int x, int y, int col) (x,y) Shaded area ,col Indicates the color to be painted imagefill($image, 0, 0,
$bgcolor); //10> set variable $captcha_code = ""; //7> Generate random letters and numbers for($i=0;$i<4;$i++){
// Set font size $fontsize = 8; // Set font color , Random color $fontcolor = imagecolorallocate($image,
rand(0,120),rand(0,120), rand(0,120)); //0-120 dark color // Set the value to be taken randomly , Remove error prone values such as 0 and o $data
='abcdefghigkmnpqrstuvwxy3456789'; // Fetch value , String interception method strlen Get string length $fontcontent =
substr($data, rand(0,strlen($data)),1); //10>.= Continuously defined variables $captcha_code .=
$fontcontent; // Set coordinates $x = ($i*100/4)+rand(5,10); $y = rand(5,10); imagestring(
$image,$fontsize,$x,$y,$fontcontent,$fontcolor); } //10> Save to session $_SESSION[
'authcode'] = $captcha_code; //8> Add interference elements , Set snowflake point for($i=0;$i<200;$i++){
// Sets the color of the point ,50-200 The color is lighter than the number , Do not interfere with reading $pointcolor = imagecolorallocate($image,rand(50,200)
, rand(50,200), rand(50,200)); //imagesetpixel — Draw a single pixel imagesetpixel($image,
rand(1,99), rand(1,29), $pointcolor); } //9> Add interference elements , Set horizontal line for($i=0;$i<4;$i++){
// Sets the color of the line $linecolor = imagecolorallocate($image,rand(80,220), rand(80,220),rand(
80,220)); // Set line , Two points and one line imageline($image,rand(1,99), rand(1,29),rand(1,99), rand(1,
29),$linecolor); } //2> Set head ,image/png header('Content-Type: image/jpeg');
//3>imagepng() establish png Graph function imagepng($image); //4>imagedestroy() End graph function Destroy $image
imagedestroy($image); ?>
Registration page
Click highlight
Login page
database
Technology