欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Java基础学习第十周总结

程序员文章站 2022-05-11 13:39:43
...

一、知识概括

1.HTML

Java基础学习第十周总结

2.JavaWeb

Java基础学习第十周总结

Java基础学习第十周总结

Java基础学习第十周总结 

二、例题

实现下图效果:

Java基础学习第十周总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0px;
				background-image: url(img/a.jpeg);
				background-size: cover;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#container{
				background-color: white;
				width: 2700px;
				height: 1000px;
				display: flex;
				
			}
			#one{
				font-size: 70px;
				color: orange;
			}
			#two{
				font-size: 70px;
				color: lightgray;
			}
			#left{
				width: 25%;
				margin-left: 20px;
				margin-top: 30px;
			}
			#center{
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			#right{
				width: 25%;
				font-size: 50px;
				margin-top: 30px;
			}
			table{
				margin: 30px;
			}
			
			a{
				text-decoration: none;
				color: orangered;
			}
			a:hover{
				color: crimson;
			}
			.i{
				width: 700px;
				height: 80px;
				margin: 10px;
			}
			#check{
				width: 400px;
			}
			#checks{
				display: flex;
				align-items: center;
			}
			img{
				width: 300px;
				height: 80px;
			}
			button{
				background-color: #FFE4C4;
				width: 220px;
				height: 92px;
				
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">
				<font id="one" class="t">新用户注册</font><br />
				<font id="two" class="t">USER REGISTER</font>
			</div>
			<div id="center">
				<table>
					<tr>
						<td>账户</td>
						<td>
							<input class="i" type="text" name="username" placeholder="请输入用户名" />
						</td>
					</tr>
					<tr>
						<td>密码</td>
						<td>
							<input class="i" type="password" name="pwd" placeholder="请输入密码" />
						</td>
					</tr>
					<tr>
						<td>Email</td>
						<td>
							<input class="i" type="text" name="Email" placeholder="请输入邮箱" />
						</td>
					</tr>
					<tr>
						<td>姓名</td>
						<td>
							<input class="i" type="text" name="realname"  placeholder="请输入真实姓名" />
						</td>
					</tr>
					<tr>
						<td>手机号</td>
						<td>
							<input class="i" type="text" name="phonenumber" placeholder="请输入手机号" />
						</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 class="i" type="text" name="borndate" placeholder="yyyy年MM月dd日" />
						</td>
					</tr>
					<tr>
						<td >验证码</td>
						<td id="checks">
							<input id="check" class="i" type="text" name="check" placeholder="请输入验证码" />
							<img src="img/a.jpg" />
						</td>
					</tr>
					<tr>
						<td >
							<button type="submit">注册</button>
						</td>
						
					</tr>
					
				</table>
			</div>
			<div id="right">
				<span>已有用户?</span>
				<a href="index.html">立即登录</a>
			</div>
		</div>
	</body>
</html>