Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

PHP develops simple book background management system administrator login page

This section will implement a login page

1620.png

##Create a <form> form to implement the login page, as shown in the figure, the login page is composed of a bunch of small icons. Friends who are interested can make some small icons or cool pictures and load them into files to make their login page look more elegant. 

<body>
<div id="top"> </div>
<form id="frm" name="frm" method="post" action="" onSubmit="return check()">
	<div id="center">
		<div id="center_left"></div>
		<div id="center_middle">
			<div class="user">
				<label>用户名：
					<input type="text" name="username" id="username" />
				</label>
			</div>
			<div class="user">
				<label>密　码：
					<input type="password" name="pwd" id="pwd" />
				</label>
			</div>
			<div class="chknumber">
				<label>验证码：
					<input name="code" type="text" id="code" maxlength="4" class="chknumber_input" />
				</label>
				<img src="verify.php" style="vertical-align:middle" />
			</div>
		</div>
		<div id="center_middle_right"></div>
		<div id="center_submit">
			<div class="button"> <input type="submit" name="Submit" class="submit" value="&nbsp;">
			</div>
			<div class="button"><input type="reset" name="Submit" class="reset" value=""> </div>
		</div>
	</div>
</form>
<div id="footer"></div>
</body>

Package CSS styles to create a style.css file


<link rel="stylesheet" type="text/css" href="style.css"/>

Add the above link in <head> and call the css file. 

<style>
  body {
   margin:0;
   padding:0;
   overflow:hidden;
   background:url(/upload/course/000/000/008/582403bb1d326430.gif) repeat-x #152753;
   font-size: 12px;
   color: #adc9d9;
}
#top {
   margin: 0 auto;
   clear:both;
   height:318px;
   width:847px;
   background:url(/upload/course/000/000/008/58240450e5b8e453.gif) no-repeat;
}
#center {
   height:84px;
   text-align:center;
}
#center_left {
   margin-left:65px;
   float:left;
   background:url(/upload/course/000/000/008/5824048c61afe958.gif) no-repeat;
   height:84px;
   width:381px;
}
/* IE7 HACK*/
*+html #center_left {
   margin-left:206px !important;
}
/* END HACK*/
#center_middle {
   float:left;
   background:url(/upload/course/000/000/008/582404a48b17a540.gif) no-repeat;
   height:84px;
   width:162px;
}
#center_middle_right {
   float:left;
   background:url(/upload/course/000/000/008/582404c137d1a417.gif) no-repeat;
   height:84px;
   width:26px;
}
#center_submit {
   float:left;
   background:url(/upload/course/000/000/008/582404cee31fc426.gif) no-repeat;
   height:84px;
   width:67px;
}
#center_right {
   float:left;
   background:url(/upload/course/000/000/008/582404e5d1716236.gif) no-repeat;
   height:84px;
   width:211px;
}
#footer {
   margin:0 auto;
   background:url(/upload/course/000/000/008/5824050172cb6295.gif) no-repeat;
   height:206px;
   width:847px;
}
INPUT {
   width:100px;
   height:17px;
   background-color:#87adbf;
   border:solid 1px #153966;
   font-size:12px;
   color:#283439;
}
.chknumber_input {
   width:40px;
}
.user {
   margin: 6px auto;
}
/* IE7 HACK*/
*+html .user {
   margin: 4px auto;
}
/* END HACK*/
.chknumber {
   margin-bottom:3px;
   text-align:left;
   padding-left:3px
}
.button {
   margin: 15px auto;
}
.submit{
   background-image:url(/upload/course/000/000/008/58240523905f5156.gif); width:57px; height:20px;
}
.reset{
   background-image:url(/upload/course/000/000/008/5824054310e9b518.gif); width:57px; height:20px;
}
IMG {
   border:none;
   cursor:pointer;
}
FORM {
   margin:0;
   padding:0
}
</style>

Note: In order to display the effect on the page, no external CSS file is used. Directly load the css content in the <style> tag and place it in the <head> section.

Continuing Learning
new file
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图书后台管理系统注册</title> <style> body { margin:0; padding:0; overflow:hidden; background:url(https://img.php.cn/upload/course/000/000/008/582403bb1d326430.gif) repeat-x #152753; font-size: 12px; color: #adc9d9; } #center { height:84px; text-align:center; } * IE7 HACK*/ *+html #center_left { margin-left:206px !important; } /* END HACK*/ #center_middle { float:left; background:url(https://img.php.cn/upload/course/000/000/008/582404a48b17a540.gif) no-repeat; height:84px; width:162px; } #center_middle_right { float:left; background:url(https://img.php.cn/upload/course/000/000/008/582404c137d1a417.gif) no-repeat; height:84px; width:26px; } #center_submit { float:left; background:url(https://img.php.cn/upload/course/000/000/008/582404cee31fc426.gif) no-repeat; height:84px; width:67px; } #center_right { float:left; background:url(https://img.php.cn/upload/course/000/000/008/582404e5d1716236.gif) no-repeat; height:84px; width:211px; } INPUT { width:100px; height:17px; background-color:#87adbf; border:solid 1px #153966; font-size:12px; color:#283439; } .chknumber_input { width:40px; } .user { margin: 6px auto; } /* IE7 HACK*/ *+html .user { margin: 4px auto; } /* END HACK*/ .chknumber { margin-bottom:3px; text-align:left; padding-left:3px } .button { margin: 15px auto; } .submit{ background-image:url(https://img.php.cn/upload/course/000/000/008/58240523905f5156.gif); width:57px; height:20px; } .reset{ background-image:url(https://img.php.cn/upload/course/000/000/008/5824054310e9b518.gif); width:57px; height:20px; } IMG { border:none; cursor:pointer; } FORM { margin:0; padding:0 } </style> </head> <body> <div id="top"> </div> <form id="frm" name="frm" method="post" action="" onSubmit="return check()"> <div id="center"> <div id="center_left"></div> <div id="center_middle"> <div class="user"> <label>用户名： <input type="text" name="username" id="username" /> </label> </div> <div class="user"> <label>密　码： <input type="password" name="pwd" id="pwd" /> </label> </div> <div class="chknumber"> <label>验证码： <input name="code" type="text" id="code" maxlength="4" class="chknumber_input" /> </label> <img src="verify.php" style="vertical-align:middle" /> </div> </div> <div id="center_middle_right"></div> <div id="center_submit"> <div class="button"> <input type="submit" name="Submit" class="submit" value=" "> </div> <div class="button"><input type="reset" name="Submit" class="reset" value=""> </div> </div> </div> </form> <div id="footer"></div> </body> </html>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free Simple book backend management system tutorial for PHP development
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
Free Ajax message board, waterfall flow video tutorial
Free AJAX cross-domain solution: JSONP video tutorial
Free Yexiutang HTML5+CSS3 video tutorial
Free React Native advanced in-depth video tutorial
Free LNMP production environment optimization and LVS cluster video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496451
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)