运用表单功能做了登陆窗口+超链接+表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成绩查询登陆</title>
</head>
<style>
div {
background: #fff;
text-align: center;
}
input {
height: 45px;
width:300px;
border: 1px solid;
margin-top: 20px;
}
button {
height: 45px;
width: 300px;
background: #fff;
margin-top: 20px;
border: none;
background: #EF5B00;
color: #fff;
font-size: 20px;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #000;
}
</style>
<body>
<div>
<form action="">
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<button><a href="chengji.html">登陆</a></button>
</form>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成绩单详情页</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
margin: 0 auto;
height: 600px;
width: 500px;
margin-top: 100px;
}
table {
text-align: center;
border: 1px solid #ccc;
height: 400px;
width: 500px;
border-collapse: collapse;
}
th {
border: 1px solid #ccc;
}
tr td{
height: 40px;
border: 1px solid #ccc;
}
button {
height: 30px;
width: 100px;
background: #fff;
background: #EF5B00;
border: none;
color: #fff;
font-size: 16px;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #000;
}
</style>
<body>
<div>
<table>
<tr>
<th colspan="7">清华小学二年级一班成绩单</th>
</tr>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
<th>地理</th>
<th>历史</th>
<th>生物</th>
</tr>
<tr>
<td>黎明</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>李刚</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>大卫</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>小王</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>小黄</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>佩奇</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td>乔治</td>
<td>99</td>
<td>90</td>
<td>45</td>
<td>89</td>
<td>46</td>
<td>88</td>
</tr>
<tr>
<td colspan="7"><button><a href="login.html">退出</a></button></td>
</tr>
</table>
</div>
</body>
</html>
