Web实现：仿大学英语四级成绩查询 html css 含效果图

最新推荐文章于 2024-01-06 10:12:05 发布

jasmyn518

最新推荐文章于 2024-01-06 10:12:05 发布

阅读量1.1k

点赞数 3

分类专栏： HTML CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/jasmyn518/article/details/125442001

版权

HTML 同时被 2 个专栏收录

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

实现：仿英语四级成绩查询网页
效果图：

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>姓&ensp;&ensp;&ensp;&ensp;名：</td>
					<td>xx</td>
				</tr>
				<tr>
					<td>学&ensp;&ensp;&ensp;&ensp;校：</td>
					<td>xx大学</td>
				</tr>
			</table>
			<p class="title">笔试成绩</p>
			<table id="table2">
				<tr>
					<td>准考证号：</td>
					<td colspan="2">320xxxxxxxxxxxx</td>
				</tr>
				<tr>
					<td>总&ensp;&ensp;&ensp;&ensp;分：</td>
					<td id="redscore">536</td>
				</tr>
				<tr>
					<td></td>
					<td>听&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;力：</td>
					<td class="scores">178</td>
				</tr>
				<tr>
					<td></td>
					<td>阅&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;读：</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>等&ensp;&ensp;&ensp;&ensp;级：</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;
}