【javaWeb】学生登録ページ作成及び美化2-----html+css
学生情報登録インタフェースと美化:
コードは次のとおりです.
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%;
}
効果図は以下の通りです.