간단한 도서 백엔드 관리 시스템 관리자 로그인 페이지의 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=" "> </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>
