需求:

用html+css开发用户注册页


代码展示:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>注册页面</title>
	</head>
	<body>
		<div style="height: 100px;">
			<div style="float: left;width: 450px;">
				
				<div style="background-p_w_picpath: url(img/gw.png);height: 70px;width: 100px;
					background-position: 0px 0px;background-repeat: no-repeat;margin-top: 10px;
					margin-left: 310px;"></div>	
				<div style="float: right;"></div>
				
			</div>
			
			<div style="float: left;width: 200px;height: 100px;">
				<div style="float:left;height: 40px;margin-top: 25px;"></div>

				<div style="padding-left: 20px;padding-top: 10px;">
					<h2>欢迎注册</h2>
				</div>		
			</div>
			
			
			<div style="float: right;width: 500px;height: 100px;">
				<div style="float: left;padding-left: 300px;padding-top: 60px;">已有账号</div>
				<div style="float: right;font-weight: bold;padding-right: 70px;padding-top: 60px;cursor: pointer">请登陆</div>
			</div>
		</div>
		
		<div style="height: 7px;background-color: ghostwhite;"></div>
		
		
		<div style="height: 750px;position: relative;">
			<div style='height: 750px;width: 690px;float: left;'>

				<div style="margin-top: 70px;height: 66px;">
					
					<label for="name1" style="margin-left: 250px;font-size: 25px;">
				 		用   户   名 <input id="name1" type="text" maxlength="10" style="height: 50px;width: 300px;">
				 	</label>
					
				</div>
				
				<div style="margin-top: 30px;height: 66px;">

					<label for="name2" style="margin-left: 250px;font-size: 25px;">
				 		设置密码 <input id="name2" type="password" maxlength="20" style="height: 50px;width: 300px;">
				 	</label>
				 	
					
				</div>
				
				<div style="margin-top: 30px;height: 66px;">
					
					<label for="name3" style="margin-left: 250px;font-size: 25px;">
				 		确认密码 <input id="name3" type="password" maxlength="20" style="height: 50px;width: 300px;">
				 	</label>
					
				</div>
				
				<div style="margin-top: 30px;height: 66px;">
					
					<label for="name4" style="margin-left: 250px;font-size: 25px;">
		
						<select style="height: 55px;width: 126px;font-size: 25px;margin-top: 0px;">
				        	<option value="1">台湾 +86</option>
				        	<option value="2">香港 +852</option>
				        	<option value="2">马来西亚 +60</option>
				        	<option value="2">新加坡 +65</option>
				        	<option value="2">韓国 +82</option>
				        	<option value="2">美国 +1</option>
				        	<option value="2">澳门 +853</option>
				        	<option value="3" selected="selected">中国 +86</option>    
			        	</select>

						<input id="name4" type="password" maxlength="20" style="height: 40px;width: 285px;padding-top: 10px;margin-left:-14px ;">
				 	</label>
					
				</div>
				
				
				<div style="margin-top: 30px;height: 66px;">
					
					<label for="name5" style="margin-left: 250px;font-size: 25px;">
				 		验   证   码 <input id="name5" type="text" maxlength="10" style="height: 50px;width: 300px;">
				 	</label>
					
				</div>				
				
				
				<div style="margin-top: 30px;height: 66px;">
					<div style=";height: 55px;width: 580px;float: left;">
						<label for="name6" style="margin-left: 250px;font-size: 25px;">
				 			手机验证码 <input id="name6" type="text" maxlength="10" style="height: 50px;width: 188px;">
				 		</label>
						
					</div>
					<div style="background-color: lightgrey;height: 33px;width: 100px;float: right;padding-top: 23px;padding-right: 10px;">&nbsp;获取验证码</div>
					
				</div>
				
				
				<div style="margin-top: 30px;margin-left 30px:height: 102px;">
					<div style="padding-left: 248px;">
						<input type="radio">&nbsp;我已阅读并同意<今冬用户注册协议>
					</div>
					<div style="margin-left: 248px;">
						<button type="submit" style="margin-top: 22px;height: 57px;
							width: 350px;font-size: 27px;background: red;cursor: pointer">立刻注册</button>
					</div>
				</div>	
			</div>
			
			 
			<div style='float: right;height: 750px;width: 580px;'>
				<div style="float: left;border: 1px solid beige;height: 648px;margin-top: 65px;"></div>
				
				<div style="float: right;margin-left: 100px;height: 308px;width: 475px;">
					<div style="background-p_w_picpath: url(img/1.png);
					margin-top: 100px;
					height: 200px;
					background-repeat: no-repeat;
					background-position: -0px -53px;">
				</div>	
		
		        <div style="float: right;margin-left: 100px;height: 308px;width: 475px;">
					<div style="background-p_w_picpath: url(img/2.png);
						cursor: pointer;
						margin-top: 60px;
						height: 158px;
						background-repeat: no-repeat;
						background-position: -5px -12px;">
					</div>
						
					
				</div>	
				
					
			    </div>
			</div>
			

		</div>		
		

		<div style='height: 123px;margin-top: 50px;'> 
			
			<div style="border: 1px solid beige;width: 1200px;margin-left: 60px;"></div>
			<div style="margin-left: 284px;margin-top: 33px;height: 25px;width 600px;color: darkgray;cursor: pointer">
				关于我们&nbsp;|&nbsp;联系我们&nbsp;|&nbsp;人才招聘&nbsp;|&nbsp;商家入驻&nbsp;|&nbsp;广告服务&nbsp;|&nbsp;友情链接|&nbsp;|&nbsp;销售联盟&nbsp;|&nbsp;English Site
			</div>
			<div style="margin-left: 550px;margin-top: 15px;font-size: 15px;color: darkgray;">
				Wsyht90t2004-2016  今冬wsyht90.com 版权所有
			</div>
		</div>
	</body>
</html>


我的页面展示

html+css开发用户注册页面_html css 注册登陆

html+css开发用户注册页面_html css 注册登陆_02