一个很简单的前台程序，背景图片直接用的 Qzone 登录页背景图，自己写了个 html 页面和几十行 css，写了一个常用的 js 切换 tab 功能，demo 页面放在 sae 上，用的是 thinkphp 框架。本来想实现模拟登录 Qzone 功能，但是 Qzone 的表单设置得比较巧妙，还没搞清楚应该怎样 post 数据，关于网页抓取和模拟登录的开发一定要抓紧时间学习，这是一个很关键的技术，武大助手就是用的模拟登录教务部管理系统的功能，我要是能尽快摸索出模拟登录的方法，这必定是极好的事情。
Qzone 登录页地址：http://i.qq.com/
HTML code：
<!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=utf8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>用户登录</title>
<script type="text/JavaScript">
<!--
function settab_zzjs(name,num,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"_"+"zzjs"+i);
menu.className=i==num?"on_zzjs":"";
con.style.display=i==num?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div id="logo"></div>
<form
name="login_form"
method="post"
action="http://zhaopin.future.org.cn/manage.php"
id="login_form"
>
<ul id="login_way">
<li id="zzjs1" onClick="settab_zzjs('zzjs',1,4)">部门登录</li>
<li id="zzjs2" onClick="settab_zzjs('zzjs',2,4)">个人登录</li>
</ul>
<table id="zzjs_zzjs1" class="login_table">
<tr>
<td>
<input
name="username"
id="username"
type="text"
value="部门账号"
onClick="this.value=''"
/>
</td>
</tr>
<tr>
<td>
<input name="password" id="password" type="password" value="" />
</td>
</tr>
<tr>
<td>
<input name="login" id="login" type="submit" value="部门登录" />
</td>
</tr>
<input type="hidden" name="select1" value="部门登录" />
</table>
<table id="zzjs_zzjs2" class="login_table" style="display:none;">
<tr>
<td>
<input
name="username"
id="username"
type="text"
value="学号"
onClick="this.value=''"
/>
</td>
</tr>
<tr>
<td>
<input name="password" id="password" type="password" value="" />
</td>
</tr>
<tr>
<td>
<input name="login" id="login" type="submit" value="个人登录" />
</td>
</tr>
<input type="hidden" name="select1" value="个人登录" />
</table>
<img
id="pic"
src="http://ipic-ipic.stor.sinaapp.com/original/f2c1188842701e23fa70499c98619d35.gif"
title="二维码登录"
/>
<ul class="extra">
<li><a href="">忘记密码？</a></li>
<li><a href="">加入青传</a></li>
<li><a href="">留言反馈</a></li>
<li></li>
</ul>
</form>
</body>
</html>
CSS code：
body {
background: url("http://ipic-ipic.stor.sinaapp.com/original/112a9d67cf1d4b399b0770fbbd9dad20.jpg")
no-repeat center;
}
#logo {
background: url("http://ipic-ipic.stor.sinaapp.com/original/d60ace3a6b74a98fa4dee46394169dc2.jpg")
no-repeat;
width: 180px;
height: 180px;
position: absolute;
top: 100px;
left: 200px;
}
#login_form {
width: 418px;
height: 316px;
background: #fff;
border-radius: 5px;
position: absolute;
top: 90px;
right: 240px;
}
.login_table {
width: 258px;
margin: 40px auto;
}
#login_way {
width: 258px;
height: 40px;
border-bottom: 1px solid #e2e2e2;
padding: 0 80px;
}
#login_way li {
list-style: none;
float: left;
width: 100px;
height: 40px;
color: #999;
font-size: 16px;
line-height: 40px;
text-align: left;
margin-right: 20px;
text-align: center;
}
#login_way li:hover {
cursor: pointer;
color: #333;
}
#username,
#password {
width: 258px;
height: 38px;
padding: 9px 0 9px 10px;
border: 1px solid #ccc;
border-radius: 2px;
color: #999;
margin: 8px 0;
}
#login {
width: 115px;
height: 35px;
background: #81d620;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
margin-top: 5px;
}
#pic {
width: 51px;
height: 77px;
position: absolute;
top: 55px;
right: 10px;
}
.extra {
position: absolute;
bottom: 0px;
right: 10px;
}
.extra li {
list-style: none;
float: left;
font-size: 12px;
}
.extra li a {
color: #333;
text-decoration: none;
padding: 2px 5px;
}
.extra li a:hover {
text-decoration: underline;
}