Recently, I encountered a problem connecting to the database when I was doing a web page. After searching the Internet for 3 days, I finally figured it out.
I am connected to the Mysql database that comes with phpstudy.
If you want to connect to the Mysql database you downloaded, go online to find a way. I haven’t figured it out yet
Not much to say, bright examples!
Login page login.html
<!DOCTYPE html> <html> <head> <!-- meta-----define keywords --> <meta charset="utf-8"> <title>Common high school quality evaluation system</title> <!-- Stylesheet -- define an externally loaded stylesheet --> <link rel="stylesheet" href="../css/login.css"/> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> <h4>Login</h4> \t\t\t\t <form action="../php/login.php" method="post" onsubmit="return enter()"> <!-- placeholder provides prompt information that describes the expected value of the input field --> <input class="acc" type="text" name="username" placeholder="username"/> <input class="acc" type="password" name="password" placeholder="password"/> <div class="down"> <label>Permissions:</label> <label1><input type="radio" name="ren" value="student" checked="true">student</label1> <label1><input type="radio" name="ren" value="teacher">teacher</label1> </div> <!-- First, there is an onsubmit attribute in the form tag, which has two values of true and false. If true, this page will jump to the search_result.php page of the action attribute, otherwise it will not jump. --> <input class="submit" type="submit" name="log" value="login"/> </form> </div> </div> </body> </html>
“…/css/login.css” file on line 8
I put the settings for the div , form part here. I forgot to download the code of this CSS file from the network disk shared by the big guy. If you see it, you can contact me to delete the article
Because I am a beginner, I don’t understand most of the big guys’ codes, so I added some comments myself. `
/* Generic selector */ *{<!-- --> margin: 0; /*Set the width of all margins of an element*/ padding: 0; /* You can define the space between the element border and the element content, that is, the inner margins of top, bottom, left, and right*/ box-sizing: border-box; } /* a{ text-decoration: none; } */ /* page background */ html{<!-- --> font-size: 8px; /* login page size */ background: url(../img/login/22.jpg) no-repeat 100% fixed; background-size: 100% 100%; } /* Before the page (before the html element) */ html::before{<!-- --> content: ''; /*add content*/ width: 100%; height: 100%; position: fixed; z-index: -1; /* The z-index property sets the stacking order of elements. Elements with a higher stacking order will always be in front of elements with a lower stacking order */ backdrop-filter:blur(0.8rem); /* Can add graphic effects (such as blur or color shift) to the area behind an element*/ /*Big background image*/ } /* ::selection selector */ /* Selected text is blue background, white font */ ::selection{<!-- --> color: #FFFFFF; background-color: rgb(81, 67, 214); } /* box settings */ .box{<!-- --> display: flex; /*elastic layout*/ overflow: hidden; /*overflow hidden*/ width: 90rem; height: 55rem; border-radius: 1.5rem; /*outer border corner*/ margin: 10% auto; /*Set the width of all margins of an element*/ /* box-shadow: 0 0 1rem 0.2rem rgb(0 0 0 / 10%); */ /*Add shadow to increase stereoscopic effect*/ } .box .left{<!-- --> position: relative; width: 50%; height: 100%; /* background-color: skyblue; */ } /* insert left image */ .box .left::before{<!-- --> content: ''; position: absolute; width: 100%; height: 100%; background: url(../img/login/homepage.jpg) no-repeat ; background-size: cover; opacity: 80%; /*Set or return the opacity of the element*/ } .box .right{<!-- --> display: flex; /*elastic layout*/ width: 50%; /* specifies how the internal elements are laid out in the flex container, and defines the direction of the main axis (positive or negative) */ flex-direction: column; /* column: Displays flex items vertically as a column. */ /* align-items : Specifies the default alignment for items inside the flex container. */ align-items: center; /*items are in the center of the container*/ background-color: rgba(255, 255, 255, 0.8); /* 0.8---transparency */ } /* Register the two-character font at the beginning */ .box .right h4{<!-- --> color: rgb(99, 159, 239); font-size: 3rem; margin-top: 5rem; } .box .right form{<!-- --> display: flex; /* Specifies whether the flex element should be displayed on a single line or on multiple lines. If line wrapping is allowed, this property allows you to control the stacking direction of the lines. */ flex-wrap: wrap; /* allow newlines */ /* Defines how space between and around elements along the flex container's main axis (or grid row axis) is allocated between browsers. */ justify-content: center; /* centered arrangement */ } /* Input box */ .box .right form .acc{<!-- --> outline: none; /*outline style*/ width: 60%; height: 5rem; font-size: 1.6rem; margin-top: 5rem; /*top margin*/ padding: 0 0 0 1.6rem; /* You can define the space between the element border and the element content, that is, the top, bottom, left, and right inner margins*/ border: none; /* Remove the border of the input box */ border-bottom: 1px solid rgb(144,129,241); /*bottom border*/ /* color: rgb(144,129,241); */ background-color: rgba(0,0,0,0); } /* CSS pseudo-class :focus indicates the focused element (such as form input) */ .right form .acc:focus{<!-- --> outline: none; color:#FF7F50; \t padding: 0 0 0 1.6rem; /*Inner margin*/ } /* login button */ .submit{<!-- --> width: 500px; height: 5rem; color: #f6f6f6; background: linear-gradient(120deg, #4b068ba7 0%, #076cd1c7 100%); /*set gradient*/ font-size: 1.4rem; border: none; border-radius: 0.5rem; /*outer border corner*/ margin: 6rem 0 0 50%; /*Set the width of all margins of an element*/ transform: translateX(-50%); /*Define the transformation, just use the X-axis value. */ } /* The :hover selector is used to select the element that the mouse pointer is hovering over. */ .right .submit:hover{<!-- --> box-shadow: 0 0 2rem -0.5rem rgb(0 0 0 /15%); /*Add shadow to increase stereoscopic effect*/ } .right .down{<!-- --> display: flex; /*elastic layout*/ justify-content: space-between; /* justify-content: space-between; Arrange each element evenly, the first element is placed at the starting point, and the last element is placed at the end point */ margin-top: 1rem; /*top margin*/ width: 60%; } /* The setting of a in the down part of the right box */ .right .down label{<!-- --> font-size: 2rem; margin-top: 5rem; /*top margin*/ padding: 1rem 2rem; color: #666; } .right .down label1{<!-- --> font-size: 2rem; margin-top: 5rem; /*top margin*/ padding: 1rem 2rem; color: #666; } /* The :hover selector is used to select the element that the mouse pointer is hovering over. */ .right .down label1:hover{<!-- --> color: rgb(144,129,241); }