实现:仿英语四级成绩查询网页
效果图:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>英语四级成绩查询</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="all">
<div id="nav">
<img src="images/logo.png">
</div>
<div id="content">
<p id="title">
2021年下半年全国大学英语四级考试(CET4)-查看成绩
</p>
<table id="table1">
<tr>
<td>姓    名:</td>
<td>xx</td>
</tr>
<tr>
<td>学    校:</td>
<td>xx大学</td>
</tr>
</table>
<p class="title">笔试成绩</p>
<table id="table2">
<tr>
<td>准考证号:</td>
<td colspan="2">320xxxxxxxxxxxx</td>
</tr>
<tr>
<td>总    分:</td>
<td id="redscore">536</td>
</tr>
<tr>
<td></td>
<td>听      力:</td>
<td class="scores">178</td>
</tr>
<tr>
<td></td>
<td>阅      读:</td>
<td class="scores">189</td>
</tr>
<tr>
<td></td>
<td>写作和翻译:</td>
<td class="scores">169</td>
</tr>
</table>
<p class="title">口试成绩</p>
<table>
<tr>
<td>准考证号:</td>
<td>--</td>
</tr>
<tr>
<td>等    级:</td>
<td>--</td>
</tr>
</table>
<table id="number">
<tr>
<td>成绩报告单编号:</td>
<td>xxxx320xxxxxxxx</td>
</tr>
</table>
<a href="#">返回</a>
</div>
</div>
</body>
</html>
index.css:
*{
margin: 0;
padding: 0;
}
#all{
width: 1280px;
margin: 0 auto;
}
#all #nav{
border-bottom: 3px solid #003e7d;
padding: 10px 0;
}
#all #content{
width: 600px;
margin: 1em auto;
}
#all #content p#title{
/*height: 30px;*/
line-height: 100px;
color: #3083c7;
font-size: 22px;
text-align: center;
}
#all #content table{
width: 480px;
margin: 0 auto;
}
#all #content p.title{
width: 500px;
height: 28px;
margin: 10px auto;
text-align: center;
font-weight: bold;
line-height: 28px;
background: #b9cce3;
}
#all #content table tr td{
line-height: 30px;
}
#all #content table tr td:first-child{
font-weight: bold;
color: #19407a;
width: 5em;
}
#all #content table#table2 tr td:nth-child(2){
width: 6em;
}
#all #content table#table2 tr td:nth-child(2)#redscore{
color: red;
font-weight: bold;
}
#all #content table#table2 tr td:nth-child(3).scores{
font-weight: bold;
color: #19407a;
}
#all #content table#number{
width: 500px;
margin-top: 15px;
margin-bottom: 15px;
}
#all #content table#number td:first-child{
width: 8em;
}
#all #content a{
display: block;
width: 100px;
height: 35px;
line-height: 35px;
background: #32aeea;
border-radius: 5px;
color: white;
text-align: center;
text-decoration: none;
margin: 0 auto;
}