간단한 도서 백엔드 관리 시스템 관리자 로그인 페이지의 PHP 개발

이 섹션에서는 로그인 페이지를 구현합니다

로그인 페이지를 구현하기 위해 <form> 양식을 만듭니다. 그림과 같이 로그인 페이지는 여러 개의 작은 아이콘으로 구성됩니다. 관심 있는 친구는 작은 아이콘이나 멋진 그림을 만들어 파일에 로드하여 로그인 페이지를 더욱 우아하게 만들 수 있습니다.

<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>

CSS 스타일을 패키징하여 style.css 파일을 만듭니다.

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

<head>에 위의 링크를 추가하여 CSS 파일을 호출합니다.

<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>

참고: 페이지에 효과를 표시하기 위해 외부 CSS 파일이 사용되지 않습니다. <style> 태그에 CSS 콘텐츠를 직접 로드하고 <head>

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전