html-QQ登陆界面

最新推荐文章于 2024-10-15 11:03:53 发布

原创最新推荐文章于 2024-10-15 11:03:53 发布 · 2w 阅读

120 ·

本内容遵循CC 4.0 BY-SA版权协议

笔记专栏收录该内容

1 篇文章

订阅专栏

这是一篇关于初学者通过30节HTML课程实践制作QQ登录界面的文章。作者花费数小时完成了界面仿制，虽然代码存在冗余、命名不规范等问题，但作为学习过程的一部分，作者表示将继续努力提升。

初学30节课html的入门课程，花了几个小时模仿了一个qq的登陆界面。
效果图如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>QQ登陆界面</title>
		<style type="text/css">
			body{
				background-color: #F2F2F2;
				background-image: url(img/背景.png);
			}
			#登陆界面{
				height: 400px;
				width: 600px;
				margin: auto;
				margin-top: 200px;
				background-color:#FFFFFF;
			}
			.背景图{
				margin: auto;
				height: 200px;
				width: 600px;
				background-image: url(img/14627.jpg);
				background-size: 150% 280%;
			}
			.close{
				font-size: 20px;
				color:#FFFFFF;
				text-align: right;
				text-shadow:1px 1px lightslategray;
				padding-right:10px;
				padding-top:2px ;
			}
			.QQ{
				font-size: 100px;
				margin: 0;
				text-align: center;
				color: #F2F2F2;
				font-family: "new york";
				font-weight:100;
			}
			#框{
				background-color:#ffffff;
				height: 200px;
				width: 600px;
				
			}
			.图标{
				height:200px ;
				width: 600px;
			}
			#图标 img{
				height: 150px;
				width: 150px;
				padding: 25px;
				padding-left: 60px;
				float: left;
			}
			.表格{
				padding-top:40px ;
				padding-left: 0px;
				margin: auto;
			}
			.登陆按钮边框{
				margin-left: 35px;
				padding-top:15px ;
				
			}
			.登陆按钮{
				width: 160px;
				height: 35px;
				background-color:#09A3DC;
				border-radius:4px;
				border: none;
				color: #ffffff;
				text-shadow: 1px 1px #000000;
				transform: 0.3s;
				font-size: 16px;	
			}
		</style>
	</head>
	<body>
		<div id="登陆界面">

			<div class="背景图">
				<a href="../我的手机.html" style="text-decoration: none;">
				<p class="close" >X</p>
				<p class="QQ">Q Q</p>
				</a>
			</div>
			
		<div id="框">
			<div id="图标">
				<img src="../图标img/QQ.jpg" >
				<form action="主界面.html" method="get">
					<table class="表格" border="0px" cellspacing="0">
						<tr >
							<td style="text-shadow: 1px 1px lightgray;">账号</td>
							<td>
								<input type="text" name="longinNum"/>
								<a href="https://ssl.zc.qq.com/v3/index-chs.html"style="text-decoration: none;color:#5FA5EA;text-shadow:1px 1px lightblue;">注册账号</a>
							</td>
						</tr>
						<tr>
							<td style="text-shadow: 1px 1px lightgray;">密码</td>
							<td>
								<input type="password" name="pwd"/>
								<a href="https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account?pw_type=6"style="text-decoration: none;color:#5FA5EA;text-shadow:1px 1px lightblue;">找回密码</a>
							</td>
						</tr>
						<tr>
							<td colspan="2" style="padding-top: 5px;padding-left: 0px;">
								<div style="float: left;padding-top: 10px;">
									<input  type="checkbox"/>记住密码
								</div>
								<div style="padding-left:180px;padding-top: 10px;">
									<input type="checkbox"/>自动登陆
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div class="登陆按钮边框">
									<input class="登陆按钮"  type="submit"value="登	录" "/>
								</div>
							</td>
							
						</tr>
					</table>				

				</form>
			</div>
		</div>
			
			
		</div>
	</body>
</html>