JAVA——html+css实现注册页面设计

最新推荐文章于 2022-07-05 18:03:08 发布

大数据架构师Pony

最新推荐文章于 2022-07-05 18:03:08 发布

阅读量1k

点赞数 3

文章标签： java、 javawebcss java基础大数据基础之java、

本文链接：https://blog.csdn.net/u011110301/article/details/103376512

版权

注册页面效果如下图：代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*1.给body添加一个背景图片*/
			body {
				background-image: url(img/bg.jpg);
			}
			
			/*设置outerdiv的样式*/
			#outer{
				width:800px;
				height: 600px;
				margin-top: 100px;
				margin-left: 270px;
				border: 5px solid #DCDCDC;
				background-color: white;
			}
			
			#inner{
				width: 600px;
				height: 450px;
				margin-top: 70px;
				margin-left: 100px;
			}
			
			#s1 {
				color: blue;
			}
			#s2{
				color: #808797;
			}
			
			table {
				margin-top: 30px;
				margin-left: 100px;
			}
			
			
			/*设置所有input框的样式*/
			.inputStyle {
				width: 300px;
				margin: 5px;
				border-radius: 5px;
			}
			
			/*设置图片的水平居中*/
			#imgCheckCode {
				vertical-align: middle;
			}
			
			/*验证码的输入框设置为圆角*/
			.codeStyle {
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<!--2.创建一个div id=outer-->
		<div id="outer">
			<div id="inner">
				<h3><span id="s1">注册用户</span> <span id="s2">USER REGIRST</span></h3>
				<form>
					<table>
						<tr>
							<td>用户名</td>
							<td><input type="text" name="username" placeholder="请输入用户名" class="inputStyle"/></td>
						</tr>
						<tr>
							<td>密码</td>
							<td><input type="password" name="password" placeholder="请输入密码"  class="inputStyle"/></td>
						</tr>
						<tr>
							<td>确认密码</td>
							<td><input type="password" name="repassword" placeholder="请输入确认密码" class="inputStyle"/></td>
						</tr>
						<tr>
							<td>邮箱</td>
							<td><input type="email" name="email" placeholder="请输入邮箱" class="inputStyle"/></td>
						</tr>
						<tr>
							<td>性别</td>
							<td>
								男 <input type="radio" name="sex" value="male"  checked="checked"/>
								女 <input type="radio" name="sex" value="female"  />
							</td>
						</tr>
						<tr>
							<td>出生日期</td>
							<td><input type="date" name="birthday" class="inputStyle"/></td>
						</tr>
						<tr>
							<td>验证码</td>
							<td>
								<input type="text" name="check_code"  class="codeStyle"/>
								<input type="image" src="img/checkcode.jpg" id="imgCheckCode"/>
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input type="image" src="img/btn.jpg" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</body>
</html>