【一】考试信息网界面：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试信息网</title>
<style>
.book{
text-align: center;
font-style: initial;
background-color: aqua;
background-size: 100%;
}
</style>
</head>
<body>
<marquee>信息查询网</marquee>
<hr>
<h1 class="book" >考试信息</h1>
<hr>
<h3>高考分数已出来，智能系统已根据之前您的录取意愿，自动进行了网上报名，现可以查询到您的考试成绩及录取信息</h3>
<br>
<a href="demo8.html">跳转到考试成绩页面</a>
<br>
<a href="demo4.html">跳转到录取信息页面</a>
</body>
</html>输出样式：
【二】考试成绩界面
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高考考试成绩</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
td:hover {background-color: blue; color: white;}
</style>
<body>
<h2 align="center">李小明高考成绩</h2>
<table border="1" width="100%">
<tbody>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>理综</td>
</tr>
<tr id="tr">
<td>140</td>
<td>134</td>
<td>145</td>
<td>285</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总分:704</span></td>
</tr>
</tfoot>
</table>
</body>
</html>输出样式：
【三】录取信息界面
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>录取通知书</title>
<style>
.book{
width:100%;
height:auto;
}
img{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
width:100%;
height:auto;
position: absolute;
}
</style>
</head>
<body style="overflow: scroll;overflow: hidden">
<div class="book">
<img src="qinghua.jpg" alt="">
<marquee>金榜题名时</marquee>
<hr>
<h1 align="center">
<br>
<br>
录取通知书
</h1>
<br>
<h2>
亲爱的<u>李小明</u>同学：
</h2>
<br>
<h3> 你好！</h3>
<hr>
<br>
<h3> 你被录取到我校
<u>自动化学院</u> <u> 自动化</u>专业学习，学制四年，请于九月七日至八日凭本通知书来校报到。
</h3>
<hr>
<br>
<br>
<br>
<br>
<h4 align="right">清华大学自动化院</h4>
<h4 align="right">日期：2060年8月</h4>
</div>
</body>
</html>输出样式：
主要代码：
（1）align="center"----------实现文本居中
（2）<td colspan="4">----------实现列合并
（3）font-style----------字体
（4）background-color----------背景颜色
（5）filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;----------改变背景图像透明度
（6）<a href="demo8.html">跳转到考试成绩页面</a>-----------实现页面跳转
（7）style="overflow: scroll;overflow: hidden"----------不要滚动条
（8）<marquee>金榜题名时</marquee>----------移动字体（走马灯）