H5静态页面实现华为官网注册、登录、重置密码页面

最新推荐文章于 2024-11-18 15:06:31 发布

WD-CHINA

最新推荐文章于 2024-11-18 15:06:31 发布

阅读量6.6k

点赞数 8

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44692640/article/details/89373934

版权

HTML 专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为登录</title>
		<style>
			body{
				/* margin: 0 auto; */
			}
			#hauwei{
				margin: 0 30% 0 30%;
				width: 60%;
				display: flex;
				justify-content: center;
				
				
			}
			#img{
				padding-top: 30px;
				padding-bottom: 10px;
				height: 50px;
				display: flex;
				justify-content: center;
				
			}
			#logo{
				margin: 0 auto;
				padding: 10px 20% 100px 20%;
				width: 528px;
			}
			img{
				width: 133px;
				height: 30px;				
			}
				
			#d1{
				background-color: white;
				height: 750px;
				margin: 0 auto;
				border-radius: 5px;
				/* height: 60%; */
				border: 1px lightgray solid;
				padding: 8px 10px 8px 10px;
				box-shadow: 10px 10px 30px 20px #D3D3D3;
				
			}
			h1{
				font-size: 50px;
				padding: 0px 15% 0 15%;
			}
			form{
				
				padding: 0px 15% 50px 15%;
			}
			#username{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			#password{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			a{
				color: #000000;
				
				
			}
			button{
				background-color: rgb(246,111,106);
				width: 100%;
				height: 50px;
				color: whitesmoke;
				border-radius: 5px;
				margin: 50px 0 5px 0;
				border: none;
			}
			button:hover{
				background-color: rgb(165,75,74);
				cursor: pointer;
				border: none;
			}
			
			#zhuce{
				display: flex;
				justify-content: center;
				/* padding-right:10%; */
				margin-top:40px;
				border-bottom: 1px #D3D3D3 solid;
				padding-bottom: 30px;
			}
			p{
				font-size: 18px;
				text-align: center;
			}
			#q{
				display: flex;
				justify-content: center;
			}
			#q img{
				width: 32px;
				
				
				
			}
			#next{
				padding-top: 30px;
			}
			span{
				color: red;
			}
			
			
			 
			
			
			
		</style>
	</head>
	<body>
		
		<div id="huawei">
			<div id="logo">
				<div id="img">
					<img src="img/huawei_logo.png" alt="logo">
				</div>
				<div id="d1">
					<h1>登录</h1>
					<form action="">
						<label for="username">账户/邮箱<span>*</span></label>
						<br>
						
						<input id="username" type="text" name="username" placeholder="请输入您的帐号" autocomplete="off">
						<br>
						
						<label for="password">密码<span>*</span></label>
						<br>
						<input id="password" type="password" name="password" placeholder="请输入您的密码">
						<br>
						<a href="http://127.0.0.1:8848/%E5%8A%A8%E7%94%BB/%E6%89%BE%E5%9B%9E%E5%AF%86%E7%A0%81.html">忘记密码</a>
						<br>
						<button type="submit">登录</button>
						<br>
						<div id="zhuce">
							<a href="http://127.0.0.1:8848/%E5%8A%A8%E7%94%BB/%E6%B3%A8%E5%86%8C.html?username=&password=&lastname=&firstname=">立即注册</a>
							
						</div>
						<div id="other">
							<p>通过其他方式登录</p>
							<div id="q">
								<a href="#"><img src="img/in.png" ></a>
								<a href="#"><img src="img/wx.png" ></a>
							</div>
							
						</div>
						<div id="next">
							<a href="#">获得更多帮助?</a>
						</div>
						
					</form>
					
					
				</div>
				
				
				
			</div>
			
			
		</div>
		
		
	</body>
</html>

注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>华为注册</title>
		<style>
			#hauwei{
				margin: 0 30% 0 30%;
				width: 60%;
				display: flex;
				justify-content: center;
				
				
			}
			#img{
				padding: 30px;
				height: 50px;
				display: flex;
				justify-content: center;
				
			}
			#logo{
				margin: 0 auto;
				padding: 10px 20% 100px 20%;
				width: 528px;
			}
			img{
				width: 133px;
				height: 30px;				
			}
				
			#d1{
				background-color: white;
				margin: 0 auto;
				border-radius: 5px;
				/* height: 60%; */
				border: 1px lightgray solid;
				padding: 8px 10px 8px 10px;
				box-shadow: 10px 10px 30px 20px #D3D3D3;
				
			}
			h1{
				font-size: 50px;
				padding: 0px 15% 0 15%;
			}
			form{
				padding: 0px 15% 110px 15%;
			}
			#username{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			#password{
				border: 1px darkgrey solid;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			#p4{
				border: 1px darkgrey solid;
				width: 60%;
				height: 50px;
				border-radius: 5px;
				margin: 8px 0 8px 0;
			}
			#i1{
				width: 118px;
				height: 40px;
				position: relative;
				top: 20px;
			}
			button{
				background-color: rgb(246,111,106);
				width: 100%;
				height: 50px;
				color: whitesmoke;
				border-radius: 5px;
				margin: 50px 0 5px 0;
				border: none;
			}
			button:hover{
				background-color: rgb(165,75,74);
				cursor: pointer;
				border: none;
			}
			
			#p1{
				font-size: 13px
			}	
			#p2{
				font-size:15px ;
			}
			span{
				color: red;
			}
			
			 
			
			
			
		</style>
	</head>
	<body>
		
		<div id="huawei">
			<div id="logo">
				<div id="img">
					<img src="img/huawei_logo.png" alt="logo">
				</div>
				
				<div id="d1">
					<h1>立即注册</h1>
					<form action="">
						<label for="username">邮箱<span>*</span></label>
						<br>
						
						<input id="username" type="text" name="username" autocomplete="off">
						<br>
						
						<label for="password">密码<span>*</span></label>
						<br>
						<input id="password" type="password" name="password" >
						<br>
						<label for="username">姓<span>*</span></label>
						<br>
						
						<input id="username" type="text" name="lastname" autocomplete="off">
						<br>
						<label for="username">名<span>*</span></label>
						<br>
						
						<input id="username" type="text" name="firstname" autocomplete="off">
						<br>
						<p id="p1">我愿意接收华为为我推荐的相关信息
</p>
						<label for="yes">是</label>
						<input type="radio" id="yes" name="tt">
						<label for="no">否</label>
						<input type="radio" id="no" name="tt">
						<p id="p2"><span>*</span> 点击提交表明你接受华为的隐私政策和使用条款.</p>
						<p id="p3">验证码</p>
						<input type="text" name="" id="p4" value="" />			
						<img id="i1"src="img/VerificationCode.gif" >
						<br>
						<button type="submit" >提交</button>
						<br>
						
						
						
					</form>
					
					
				</div>
				
				
				
			</div>
			
			
		</div>
		
		
	</body>
</html>

找回密码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>找回密码</title>
		<style type="text/css">
			body{
				margin: 0 auto;
				
			}
			
			#header{
				background-image: linear-gradient(to bottom,white,lightgray);
				height: 63px;
				
				border-bottom: 1px rgb(165,165,165) solid;
			}
			#top{
				
				width: 950px;
				margin: 0 auto;
				
				height: 63px;
				
				display: flex;
				justify-content: space-between;
				align-items: center;
				
			}
			
			#top img{
				
				width: 164px;
				height: 44px;
			}
			a{
				padding: 0px;
				margin: 0;
				text-decoration: none;
				color: black;
			}
				
			form{
				
			}
			#sec{
				
				padding-left: 10px;
				width: 950px;
				margin: 0 auto;										
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				
			}
			#sec1{
				width: 940px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				
			}
			#sec1 a{
				font-size: 10px;
				color:lightslategray;
				text-decoration: none;
			}
			#sec2{
				display: flex;
				justify-content:space-between;
				
			}
			#f1{
				border: 1px #D3D3D3 solid;
				width: 940px;
				margin: 0 auto;
				border-radius: 5px;
				height: 349px;
				
			}
			form{
				height: 350px;
			}
			h3{
				padding-top: 20px;
				padding-left: 28px;
				font-size: 14px;
				line-height: 1.2;
				font-family: Arial, sans-serif;
				text-decoration: none;
				
			}
			#f2{
				padding: 30px;
				border-bottom: 1px #D3D3D3 solid;
				
			}
			#f2 a{
				
				padding-right: 40px;
				
			}
			#f3{
				padding-top: 10px;
				padding-right: 500px;
				text-align: right;
				
			}
			
			#username{
				width: 280px;
				margin-left: 20px;
				height: 30px;
			}
			#password{
				margin-left: 20px;
				width: 140px;
				height: 30px;
				
				
			}
			#s1{
				height:32px ;
				width: 132px;
				position: relative;
				top: 12px;
				padding-left:3px;
				padding-top: 12px;
				
			}
			#f5{
				padding: 30px 550px 40px 140px;
				display: flex;
				justify-content: space-around;
			}
			button{
				width: 100px;
				height: 30px;
				cursor: pointer;
			}
			#under{
				width: 950px;
				margin: 0 auto;
				
				
				margin-top::;px;										
				display: flex;
				justify-content: space-between;
				
			}
			footer{
				border-top: 1px #D3D3D3 solid;
				padding-left: 10px;
				height: 30px;
				width: 950px;
				margin: 0 auto;										
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			span{
				margin: 10px;
				
			}
			footer>p{
				margin: 10px;
				font-size: 13px;
			}
			footer>a{
				margin: 16px;
				font-size: 13px;
			}
			#t1{
				margin: 16px;
				font-size: 13px;
			}
			span{
				color: red;
			}
			
			
			
		</style>
	</head>
	<body>
		<div id="header">
			<div id="top">
				<img src="img/huawei_logo.png" >								
			</div>
		</div>
		<form action="">
			<div id="sec">
				<div id="sec1">
					<h2>重置密码</h2>
					<div id="sec2">
						<p><a href="#">帮助|</a></p>					
						<p><a href="#">简体中文 (中国)</a></p>
					</div>										
				</div>
			</div>
			
			<div id="f1">
				<h3>忘记密码？您可通过以下方式设置新密码</h3>
				<div id="f2">
					<span><a href="#">通过邮箱</a></span>
					<span><a href="#">通过账号</a></span>
					<span><a href="#">通过手机号</a></span>
				</div>
				<div id="f3">
					<label for="username">邮箱<span>*</span></label>
					
					
					<input id="username" type="text" name="username" autocomplete="off">
					<br>
					
					
					<label for="password">验证码<span>*</span></label>
					
					<input id="password" type="text" name="password" >
					<img id="s1" src="img/randomcode.jpg" >
					<br>
					
					
				</div>
				<div id="f5">
					<button type="submit" >提交</button>
					<button type="reset" >取消</button>
				</div>
			</div>
			
			
		</form>
		<div id="under">
			<footer>
				<p>版权所有 © 华为技术有限公司 1998-2019。保留一切权利。</p> 
				<div id="t1">
					<a href="#">华为公司用户注册协议(new) </a>
					<span>|</span>
					<a href="#"> 隐私声明(new)</a>
				</div>
				
			</footer>
		</div>
		
		
		
		
		
		
	</body>
</html>