最近闲来无事,利用HTML写了几个QQ界面。先看看效果图
登录
<head>
<meta charset="UTF-8" />
</head>
<div align="center">
<form >
<table border="0" width="420px" height="250px" bgcolor="lightblue">
<tr>
<td width="20%"><b >QQ2012</b></td>
<td width="70%"></td>
<td width="10%">
<img src=cancel.jpg>
<img src="back.jpg" />
</td>
</tr>
<tr>
<td></td>
<td align="left">
<font size="6px" color="white" ><b>QQ 2012</b></font><br />
<font size="2px" color="white">Pure as the South Polar Snow</font>
</td>
<td></td>
</tr>
<tr >
<td >
<img src="qq.jpg" />
</td>
<td >
<input type="text" align="top" /><a href="form.html"><font size="2px">注册账号</font></a><br />
<input type="password" align="top"/><a href="find.html"><font size="2px">找回密码</font></a><br />
<select >
<option><font size="2px">我在线上</font></option>
<option><font size="2px">隐身</font></option>
<option><font size="2px">离开</font></option>
<option><font size="2px">忙碌</font></option>
<option><font size="2px">请勿打扰</font></option>
</select>
<input type="checkbox" /><font size="2px">记住密码</font>
<input type="checkbox" /><font size="2px">自动登录</font>
</td>
<td>
</td>
</tr>
<tr >
<td align="right">
<input type="button" value="多账号" οnclick="window.location.href='multi.html'"/>
</td>
<td>
<input type="button" value="设置" οnclick="window.location.href='set.html'"/>
</td>
<td>
<input type="submit" align="right" value="登录"/>
</td>
</tr>
</table>
</form>
</div>
注册
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<div align="center">
<form action="" method="get" title="this is a form" enctype="multipart/form-data">
<table border="0" cellpadding="0" cellspacing="1" width="50%" bordercolor="green">
<tr bgcolor="lightblue" >
<td colspan="2"><p align="center">新用户注册</p></td>
</tr>
<tr bgcolor="lightyellow">
<td width="60%"><b>用户名(a)</b>:注册用户名限制为1到10个字节</td>
<td width="40%">
<label for="usr" accesskey="a"></label>
<input type="text" name="user" id="usr"/></td>
</tr>
<tr bgcolor="lightyellow">
<td width="60%"><b>性别</b>:请选择您的性别</td>
<td width="40%">
<label for="male" accesskey="b"></label>
<input type="radio" checked="checked" value="1" id="male"/><img src="male.jpg" /> 男(b)
<label for="female" accesskey="c"></label>
<input type="radio" value="0" id="female"/><img src="female.jpg" />女(c)</td>
</tr>
<tr bgcolor="lightyellow">
<td width="60%"><b>密码</b>:(至少6位)请输入密码,区分大小写</td>
<td width="40%"><input type="password" /></td>
</tr>
<tr bgcolor="lightyellow">
<td width="60%"><b>密码</b>:(至少6位)再输入一遍密码</td>
<td width="40%"><input type="password" /></td>
</tr>
<tr bgcolor="lightyellow">
<td width="60%"><b>密码问题</b>:忘记密码的提示问题</td>
<td width="40%"><select>
<option>我母亲的生日????</option>
<option>我的家乡??????</option>
<option>我的手机号码????</option>
<option>我最爱的食物????</option>
</select>
</td>
</tr>
<tr bgcolor="lightyellow">
<td width="40%"><b>问题答案</b>:忘记密码的提示问题答案</td>
<td width="60%"><input type="text" /></td>
</tr>
<tr bgcolor="lightyellow">
<td width="40%"><b>Email地址</b>:请输入您的邮箱地址</td>
<td width="60%"><input type="text" /> <input type="button" value="检测账号"/></td>
</tr>
<tr bgcolor="lightyellow">
<td>
<input type="checkbox" />显示高级用户设置选项
</td>
<td >
<input type="submit" value="注册" />
<input type="reset" value="清除" />
</td>
</tr>
</table>
<!--<textarea rows="10" cols="20">在此输入您的意见</textarea>-->
</form>
</div>
</head>
</html>
设置
<html>
<head>
<meta charset="UTF-8" />
<div align="center">
<form>
<table bgcolor="lightblue" width="400px" border="0" height="50%" >
<tr>
<td width="1%"><img src="images.jpg" /></td>
<td width="17%"><b>设置</b></td>
<td width="26%"></td>
<td width="28%"></td>
<td width="28%" align="right">
<img src="cancel.jpg" />
<img src="back.jpg" />
</td>
</tr>
<tr>
<td width="4%"></td>
<td colspan="4"><font size="2px">您可以在登录前设置网络连接。</font></td>
</tr>
<tr>
<td width="4%"></td>
<td ><font size="2px">网络设置</font></td>
<td colspan="3"><hr width="100%" /></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ><font size="2px">类型:</font></td>
<td ><font size="2px">地址:</font></td>
<td ><font size="2px">端口:</font></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td width="28%"> <select>
<option>不使用代理</option>
<option>HTTP代理</option>
<option>SOKT代理</option>
<option>浏览器设置</option>
</select></td>
<td width="28%">
<input type="text" size="8px" />
</td>
<td width="28%">
<input type="text" size="8px" />
</td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ><font size="2px">用户名:</font></td>
<td ><font size="2px">密码:</font></td>
<td ><font size="2px">域:</font></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td >
<input type="text" size="10px"/>
</td>
<td >
<input type="text" size="8px"/>
</td>
<td >
<input type="text" size="8px"/>
</td>
</tr>
<tr>
<td width="4%"></td>
<td ><font size="2px">登录服务</font></td>
<td colspan="3"><hr width="100%" /></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ><font size="2px">类型:</font></td>
<td ><font size="2px">地址:</font></td>
<td ><font size="2px">端口:</font></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td width="28%"> <select>
<option>TCP选项</option>
<option>UDP选项</option>
<option>不使用选项</option>
</select></td>
<td width="28%">
<input type="text" size="8px" />
</td>
<td width="28%">
<input type="text" size="8px" />
</td>
</tr>
<tr>
<td colspan="5" align="right">
<input type="button" value="确认" size="6px" />
</td>
</tr>
</table>
</form>
</div>
</head>
</html>