百度网页注册HTML代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册百度账号</title>
	</head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			width:80%;
			margin:auto;
		}
		#head{
			display: block;
    		overflow: hidden;
		}
		.logo{
			
			width:137px;
			height:46px;
			margin-top:15px;
			margin-left:47px;
			float:left;
		}
		#head p{
			height:25px;
			width:140px;
			font-size:18px;
			border-left:1px solid #d9d9d9;
			color:#666666;
			text-align: center;
			float:left;
			margin-top:37px;
			margin-left:13px;
			font-weight:bold;
			
		}
		.logo_a{
			text-decoration: none;
			width:330px;
			height:76px;
			margin-left:50px;
		}
		#login{
			margin-top:27px;
			margin-right:70px;
			float: right;
			font-size: 10px;
			
		}
		#login>button{
			margin-left:5px;
			width:50px;
			height:30px;
			border: 1px solid #ededed;
			border-radius: 7%;
			background: #f7f7f7;
		}
		
		.example {
   		width: 100%;
   		height: 3px;
   		background: -webkit-linear-gradient(top,#C1C1C1,#EDEDED);
   		margin-bottom: 50px;
   		margin-top: 20px;
 		}
		#left{
			float:left;
			width:750px;
			height:380px;
		}
		#left form{
			margin-left:70px;
		}
		#left p{
			margin-bottom:20px;
			color:#666695;
		}
		#left span{
			font-size:10px;
			height:20px;
		}
		#left .text{
			margin:0 7px;
			width:350px;
			height:40px;
			padding-left:15px;
		}
		.check_p{
			margin-left:5px;
			font-size: 8px;
			
		}
		.check_p a{
			text-decoration:none;
		}
		.checkbox{
			margin-left:50px;
		}
		.submit{
			margin-top:20px;
			margin-left:50px;
			width:370px;
			height:40px;
			background: #3F89EC;
			border-radius: 5px;
			color:#fff;
			font-size:18px;
		}
		#right{
			width:258px;
			height:205px;
			border:1px solid #D1EEFF;
			float: right;
			background: #F5FBFF;
			margin-right:50px;
		}
		#right_main{
			margin:5px auto;
			width:230px;
			height:190px;
		}
		#right_top{
			margin:0 auto;
			border-bottom: 1px solid #E6EDF2;
			width:230px;
			height:50px;
		}
		#right_top img{
			margin-top: 5px;
		}
		#right_top span{
			float:right;
			margin: 10px 100px 0 0px;
		}
		.font1{
			margin-top:10px;
			font-size:10px;
		}
		.font2{
			font-size:14px;
			color:#F18300;
			font-weight: bold;
		}
		.div{
			display: inline;
		}
		.pp{
			float:left;
		}
		.span{
			color:#666695;
		}
		.p1{
			position: absolute;
			top:380px;
		}
		#bottom{
			position: absolute;
			top:600px;
			left:650px;
			font-size: 12px;;
		}
		#bottom p{
			color:#666695;
		}
		li{
			font-size: 10px;
			color:#666695;
		}
		.div1{
			float:left;
			margin-left:15px;
		}
		.div2 span{
			color:#666695;
		}
	</style>
	<body>
		<div id="head">
			<a class="logo_a" href="http://www.baidu.com">
			<img class="logo" src="images/logo.gif"/>
			<p>注册百度账号</p>
			</a>
			<span id="login">我已注册，现在就<button>登录</button></span>
		</div>
		<div id="main">
		
			<div class="example"> </div>
			<div id="left">
				<form method="post" action="#">
					<p class="pp">用户名<input class="text" placeholder="请设置用户名" type="text"/><div class="div" ><span class="span">设置后不可更改</span><br/><span class="span">中英文均可,最长14个英文字符或7个汉字</span></div></p>
					<p class="pp">手机号<input class="text" placeholder="可用于登录和找回密码" type="text"/><div class="div2"><span>请输入中国大陆手机号，其他用户不可见</span></div></p>
					<p class="pp">验证码<input class="text" placeholder="请输入验证码" type="text"/></p>
					<p class="pp">&nbsp&nbsp&nbsp密码<input class="text" placeholder="请设置登录密码" type="text"/><div class="div1"><ul><li>长度为6~14个字符</li><li>支持数字，大小写字母和标点符号</li><li>不允许有空格</li></ul></div></p>
					<p class="p1"><input class="checkbox" type="checkbox"  checked="checked" /><span class="check_p">阅读并接受<a href="#">《百度用户协议》</a></span></p>
					<br/>
					<input class="submit" type="submit" value="注册" />
				</form>
				
			</div>
			<div id="right">
				<div id="right_main">
					<div id="right_top">
						<img src="images/shouji.png"/>
						<span>手机快速注册</span>
					</div>
					<p class="font1">请使用中国大陆手机号，编辑短信：</p>
					<p class="font2">6-14位字符（支持数字/字母/符号）</p>
					<p class="font1">作为登录密码，发送至：</p>
					<p class="font2">1069 0691 036590</p>
					<p class="font1">即可注册成功，手机号即为登录帐号。</p>
				</div>
			</div>
			</div>
			<div id="bottom">
				<p>2017 ©Baidu</p>
			</div>

	</body>
</html>

 

posted @ 2019-10-16 10:50  JackieDYH  阅读(49)  评论(0)  编辑  收藏  举报  来源