【javaWeb】学生注册页面编写及美化2--------html+css

学生信息注册界面及美化:

代码如下:

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息注册页面</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

</head>
<body>
	<div class="back">
		<div class="left">
			<h1>学生信息注册</h1>
			<p>xueshengxinxizhuce</p>
		</div>
		<div class="right">
			<table border="0">

				<tr>
					<td align="left">姓名:</td>
					<td><input type="text" class="kuang" placeholder="  请输入姓名"></td>
				</tr>
				<tr>
					<td align="left">性别:</td>
					<td><input type="radio" checked><input type="radio"></td>
				</tr>
				<tr>
					<td align="left">出生日期:</td>
					<td><input type="text" class="kuang"
						placeholder="  yyyy-mm-dd"></td>
				</tr>
				<tr>
					<td align="left">学校:</td>
					<td><input type="text" class="kuang" placeholder="  请输入学校名"></td>
				</tr>
				<tr>
					<td align="left">密码:</td>
					<td><input type="password" class="kuang"
						placeholder="  请输入六位密码"></td>
				</tr>
				<tr>
					<td align="left">专业:</td>
					<td><select class="kuang">
							<option value="计算机科学与技术">计算机科学与技术
							<option value="粮食工程">粮食工程
					</select></td>
				</tr>
				<tr>
					<td align="left">体育特长:</td>
					<td><input type="checkbox" name="体育特长">篮球 <input
						type="checkbox" name="体育特长">排球 <input type="checkbox"
						name="体育特长">足球 <input type="checkbox" name="体育特长">游泳</td>
				</tr>
				<tr>
					<td align="left">上传照片:</td>
					<td><input type="file" class="kuang"></td>
				</tr>

				<tr>
					<td align="left">个人介绍:</td>
					<td><textarea rows="3" cols="33" placeholder="介绍一下自己吧!" class="kuang"></textarea></td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<form action="#" method="get">
							<input type="submit" value="提交" class="anniu"> <input
								type="reset" value="取消" class="anniu">
						</form>
					</td>
				</tr>
			</table>
		</div>
		<div class="foot"><p>已有账号?<a href="#">点此立即登录</a></p></div>
	</div>
</body>
</html>

css:

@charset "UTF-8";

body {
	background-image: url("注册页面背景图.jpg")
}

div.back {
	background-color: rgba(255, 255, 255, 0.7);
	width: 730px;
	margin-top: 100px;
	margin-left: 450px;
	padding: 10px;
	height: 408px;
	
}
table{
	font-weight:bold;
}
div.left {
	float: left;
	margin-left: 70px;
	margin-top: 70px;
}

div.right {
	float: right;
	padding:
}

div.foot{
	margin-top:350px;
	margin-left:55px;
}

td{
	padding: 3px;
}

.anniu {
	border-radius: 2px;
	padding: 6px 34px;
	background-color: #F5FFFA;
	font-size: 14px;
	font-weight: bold;
	border:0;
}

.kuang {
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border: #FFFFFF solid 1px;
	width: 70%;
}

效果图如下:

你可能感兴趣的:(javaWeb,html,css,web)