HTML-用户登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册页面</title>
		<link rel="stylesheet" type="text/css" href="UserCss.css"/>
	</head>
	<body>
		<div id="div1">
			<span id="biaoti"><h1 id="hbiaoti" align="center">欢迎注册</h1></span>
			<form action="http://localhost:8080/test/save" method="get">
				
				<table id="GongNenglist" border="0px" cellspacing="0px" cellpadding="20px">
					<thead align="right">
						<tr><td><span id="userlist">用户名:</span></td></tr>
						<tr><td><span id="userlist">请设置密码:</span></td></tr>
						<tr><td><span id="userlist">请确认密码:</span></td></tr>
						<tr><td><span id="userlist">电子邮件:</span></td></tr>
						<tr><td><span id="userlist">验证手机:</span></td></tr>
						<tr><td><span id="userlist">短信验证码:</span></td></tr>
						<tr><td><span id="userlist">性别:</span></td></tr>
						<tr><td><span id="userlist">联系地址:</span></td></tr>
					</thead>
				</table>
				
				<table id="YongHuShuRu" border="0px" cellspacing="0px" cellpadding="13px">
					<tbody id="wenbenshuru">
						<tr><td><span><input type="text" name="username" id="user" value=""  placeholder="请输入用户名" /></span></td></tr>
						<tr><td><span><input type="password" name="userpwd" id="user" value="" placeholder="请输入密码" /></span></td></tr>
						<tr><td><span><input type="password" id="user" value="" placeholder="请在此输入密码"/></span></td></tr>
						<tr><td><span><input type="email" name="useremail" id="user" value=""placeholder="请输入邮箱" /></span></td></tr>
						<tr><td><span><input type="tel" name="usertel" id="user" value="" placeholder="请输入电话"/></span></td></tr>
						<tr><td><span><input type="text" name="userYanzheng" style="width: 250px; height: 30px;"placeholder="请输入手机六位验证码" value="" /></span>
						              <input id="yanzhengma" type="button" value="获取短信验证码" /></td></tr>
						<tr><td id="user"><span id="sextext"><input type="radio" name="usersex" id="userXB" value="1" checked="checked"/>男
						              <input type="radio" name="usersex" id="userXB" value="0" />女</span></td></tr>
						<tr><td><span><input type="text" name="usermsg" id="user" value="" placeholder="请输入地址"/></span></td></tr>
						<tr><td id="user"><span><input type="checkbox" name="useryes"  value="1" /><font size="2" color="white">我已阅读并同意</font><a href="#" target="_blank">《用户注册协议》</a></span></td></tr>
					</tbody>
					
				</table>
				<span id="spanzc"><input id="zhuce" type="submit" value="立即注册"/></span>
				
				<span id="foot">
				<font size="3" color="white">已有账号</font><a href="#" target="_blank">直接登录</a>
				</span>
			</form>
		</div>		
		
	</body>
</html>

CSS文件 

		body{
				background-image: url(imgs/26.jpg);
				background-size: cover;
				background-attachment: fixed;
			}
			#div1{
				width: 800px;
				height: 800px;
				background-color: #52a0ea;
				position: absolute;
				left: 25%;
			}
			
			#spanzc{
				width: 100px;
				position: absolute;
				bottom: 100px;
				left:200px;
				
				
			}
			#zhuce{
				width: 500px;
				background-color:#5db954 ;
				height: 40px;
				color: white;
				border-style: none;
			}
			#hbiaoti{
				font-family: "楷体";
				color: white;
			}
			#GongNenglist{
				position: absolute;
				left: 10%;
			}
			#YongHuShuRu{
				position: absolute;
				left:200px;
				top: 90px;
			}
			#user{
				width: 500px;
				height: 30px;
			}
			input{
				border-radius: 5px;
				border-style: none;
				
			}
			a{
				text-decoration: none;
				cursor: pointer;
				color: black;
			}
			/* a:link{
				color: black;
			} */
			
			/* a:active{
				color: blue;
			} */
			
			a:hover{
				color: red;
			}
			/* a:visited{
				color: darkgray;
			} */
			#yanzhengma{
				border-color: white;
				border-style: none;
				width: 160px;
				height: 40px;
				margin-left: 20px;
				background-color: white;
			}
			#foot{
				position: absolute;
				bottom: 70px;
				left:200px;
			}
			#userlist{
				color: white;
			}
			#sextext{
				color: white;
			}

猜你喜欢

转载自blog.csdn.net/weixin_52192654/article/details/114337179