QQ注册页面

最新推荐文章于 2024-04-30 10:00:00 发布

telephone05

最新推荐文章于 2024-04-30 10:00:00 发布

阅读量440

点赞数 1

文章标签： css javascript css3

本文链接：https://blog.csdn.net/telephone05/article/details/133977288

版权

之前写的一个QQ注册静态页面，分享给大家~

先放效果图：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ注册页面</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.input {
				width: 400px;
				height: 35px;
				border: 1px solid #96cafd;
				margin-top: 25px;
			}
			label {
				width: 150px;
				display: inline-block;
				text-align: right;
			}
			#submit{
				width: 180px;
				height: 50px;
				background-color: red;
				color: #ffffff;
				font-size: 25px;
				margin-top:60px;
				margin-left: 150px;
				border: none;
				box-shadow: darkgrey 2px 2px 2px 2px ;//边框阴影
			}
			span{
				color:red;
			}
			form{
				background-color: #ffffff;
				width: 1115px;
				height: 800px;
				position:absolute;
				z-index: 11;
				margin-left: 202px;
				margin-top: 126px;
				border:1px solid #96cafd;
				
			}
			#body{
				position:absolute;
				z-index: 111;
				padding-left: 150px;
				padding-top: 100px;
			}
			hr{
				height:1px;
				width:800px;
				margin-top: 10px;
			}
			#background-img{
				width: 100%;
				height: 600px;
				position:absolute;
				z-index: 1;
			}
			#top-img{
				width:100%;
				position:absolute;
				z-index: 11;
			}
		</style>
	</head>
	<body>
		<div>
			<img id="background-img"src="作业1素材/body.png">
			<img  id="top-img"src="作业1素材/bg_chs.png" >
			<form>
				<div id="body" >
					<h2>注册账号</h2>
					<hr/>
					<p><label><span>*</span>昵称：</label><input type="text" name="name" class="input"required pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$" placeholder="英文,数字长度为6-10个字符"></p>
					<p><label><span>*</span>密码：</label><input type="text" name="password" class="input" required pattern="^[^\u4e00-\u9fa5 ]{6,16}$" placeholder="长度为6-16个字符"></p>
					<p><label><span>*</span>手机号码：</label><input type="text" name="tel" class="input"required pattern="^1[34578]\d{9}" placeholder="以13|14|15|17|18开头">&nbsp&nbsp 忘记密码时可用手机号找回密码</p>
					<p><label><span>*</span>邮箱：</label><input type="email" name="email" class="input" required></p>
					<p><label><span>*</span>年龄：</label><input type="number" name="age" class="input" required min="0" max="200"></p>
					<input type="submit" value="立即注册" id="submit">
				</div>
			</form>
		</div>
	</body>
</html>

如有不对，欢迎大家的指正~