利用HTML显示QQ的几个界面

最近闲来无事,利用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>






  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值