网站后台管理界面的设计是要在数据库建好只好才能进行、、如果数据库还没建好的话,那连接部分先设置为空,页面转置方面也不能完成功能。今天工作完成得很早,就自己写了个代码,还有页面背景图片用了学习时候的一个例子,如果自己需要设置地有个性,可用自己网站的logo设置自己的风格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>后台登陆界面</title>
<style type="text/css">
<!--
.work{
font-size:32px;
color:#FF6600;
padding-top:180px;
}
body {
background-color: #336699;
}
body {
background-color: #CCCCFF;
background-image: url(images/2.jpg);
}
.STYLE1 {
font-size: 18px;
font-weight: bold;
}
.form{
padding-top:280px;
padding-right:50px;
padding-left:600px;
}
.STYLE2 {color: #FFCCFF}
-->
</style>
</head>
<body>
<form method="post" action="" class="form">
<table width="280" border="0" align="center">
<tr>
<td width="87" align="center" valign="middle" background="/upload/users/1/20131206/1.jpg"><div align="right" class="STYLE1">
<div align="right">用户名:</div>
</div></td>
<td width="183" background="/upload/users/1/20131206/1.jpg" bgcolor="#CCFFFF"><span class="STYLE2">
<label>
<input name="name" type="text" id="name" maxlength="10" />
</label>
</span></td>
</tr>
<tr>
<td height="37" align="center" valign="middle" background="/upload/users/1/20131206/1.jpg"><div align="right"><span class="STYLE1">密 码</span>:</div></td>
<td background="/upload/users/1/20131206/1.jpg" bgcolor="#CCFFFF"><span class="STYLE2">
<label>
<input name="pwd" type="password" id="pwd" maxlength="20" />
</label>
</span></td>
</tr>
<tr>
<td align="center" valign="middle" background="/upload/users/1/20131206/1.jpg"><label>
<div align="center">
<input type="submit" name="Submit" value="提交" />
</div>
</label></td>
<td background="/upload/users/1/20131206/1.jpg" bgcolor="#CCFFFF"><span class="STYLE2">
<label>
</span>
<div align="center" class="STYLE2">
<input name="reset" type="reset" id="reset" value="重置" />
</div>
<span class="STYLE2">
</label>
</span></td>
</tr>
</table>
</form>
</body>
</html>
表单部分如果CSS+DIV熟练的话那就不要用table标记,table标记做的话可能代码量大,会影响速度。
下面的图片是上面代码运行之后的结果。