【javaWeb】学生注册页面编写及美化1--------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>
	<center>
		<div class="back">
			<div class="a">
				<h1>学生信息注册</h1>
			</div>
			<div class="neirong">
				<div class="b">

					<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>
									<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"></td>
						</tr>

						<tr>
							<td align="left">个人介绍:</td>
							<td><textarea rows="3" cols="33" placeholder="介绍一下自己吧!"></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>

		</div>
	</center>
</body>
</html>

css:

@charset "UTF-8";

div.back {
	
	padding-bottom: 23px;
	width: 500px;
	margin: 35px 60px;

}

div.a {
	border-style: solid;
	border-color: #ffffff;
	border-radius: 15px;
}

body {
	background-image: url("背景2.jpg")
}

table {
	background-color: FFAEB9;
	color: #FFFFFF;
}

td {
	padding: 5px;
	font-weight: bold;
}

h1 {
	color: #FFFFFF;
}

.kuang {
	border-radius: 15px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border: gray solid 1px;
	background-color: #F5FFFA;
}

select, textarea {
	border-radius: 7px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border: gray solid 1px;
	background-color: #F5FFFA;
}

input[type="file"] {
	border-radius: 7px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
	border: gray solid 1px;
	background-color: #F5FFFA;
}

.anniu {
	border-radius: 7px;
	padding: 6px 30px;
	background-color: #F5FFFA;
	font-size: 14px;
	font-weight: bold;
}
.neirong{
	margin-top:10px;
	border-style:double;
	border-color:#ffffff;
	border-radius:15px;
	border-width:medium;
	padding-bottom:9px;
}
input[type="submit"]{
}


效果图如下:
【javaWeb】学生注册页面编写及美化1--------html+css_第1张图片

你可能感兴趣的:(javaWeb)