web_QQ登录注册界面设计

最新推荐文章于 2024-10-17 19:40:16 发布

二师弟&

最新推荐文章于 2024-10-17 19:40:16 发布

阅读量1.8k web_html5

本文链接：https://blog.csdn.net/zhu_fangyuan/article/details/107855027

web_html5 专栏收录该内容

32 篇文章 2 订阅

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//定义变量，初始化为0
			var count = 0
			
			function check(){
				var imgObj = document.getElementById("checkImg");
				if(count % 2 == 0){
					imgObj.src = "img/1.jpg";
				}else{
					imgObj.src = "img/3.jpg";
				}
				count++;
			}
		</script>
		<style type="text/css">
			form{
				width: 440px;
				height: 600px;
			}
			#d1{
				position: relative;
			}
			#free{
				position: absolute;
				right: 0;
				color: #359eff;
				text-decoration: none;
			}
			#free:hover{
				color: blue;
			}
			.inp{
				width: 418px;
				height: 50px;
				margin-top: 30px;
				outline: none;
				border-radius: 4px;
				font-size: 20px;
				padding-left: 20px;
				border: 1px solid #aaa;
			}
			#reg{
				width: 438px;
				height: 50px;
				background: #3487ff;
				color: white;
				text-align: center;
				line-height: 50px;
				font-size: 24px;
				margin-top: 30px;
				border: 1px solid #3487ff;
				font-weight: 100;
				margin-bottom: 30px;
			}
			#reg:hover{
				background: blue;
			}
		</style>
	</head>
	<body>
		
		
		<img src="img/1.jpg"align="right">
		<form>
			<div id="d1">
				<p style="font-size: 44px;">欢迎注册QQ</p>
				<span style="font-size: 28px;">每一天，乐在沟通。</span>
				<a id="free" href="" style="font-size: 24px;">免费靓号</a>
			</div>
			<div>
				<input type="text" placeholder="昵称" class="inp"/>
				<input type="password" placeholder="密码" class="inp"/>
				<input type="button" value="立即注册" id="reg"/>
				<img src="img/1.jpg" width="20px" onclick="check();" id="checkImg" style="cursor: pointer;"/>
				<span style="margin-left: -7px;color: #aaa;font-size: 13px;">我已阅读并同意相关服务条款和隐私政策</span>
			</div>
		</form>
	</body>
</html>