19软件网页期末考试_用于实现人与浏览器交互功能、优化网页性能的语言工具是-CSDN博客

本文链接：https://blog.csdn.net/weixin_47324063/article/details/107006552

本次19软件网页期末考试涵盖了HTML和CSS的相关知识，主要包含两个考题：一是关于网页播放器的实现，二是其他相关题目。通过对这两个部分的考察，旨在检验学生对网页布局和样式控制的掌握程度。

摘要由CSDN通过智能技术生成

考试题一

关于播放器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a1{
				width: 500px;
				height: 500px;
				background-image: linear-gradient(0deg,#6d4681,#e5bbff,#543b5b);
			    margin: 0 auto;
				padding: 100px;
				box-sizing: border-box;
			}
			.a2{
				width: 300px;
				height: 300px;
				background-image: linear-gradient(0deg,#904f76,#4f2e4a);
				border-radius: 30px;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 50px;
			}
			.a3{
				width: 200px;
				height: 200px;
				background-image: linear-gradient(0deg,#efb540,#a2526a);
				border: 20px solid black;
				box-sizing: border-box;
				border-radius: 20px;//圆角角度
				margin: 0 auto;
				padding: 25px;
			}
			.a4{
				width: 100px;
				height: 100px;
				border-radius: 50px;
				background-color: white;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 25px;
			}
			.a5{
				width: 0px;
				height: 0px;
				border: 30px solid ;
				margin: 0 15px;
				border-color: transparent transparent transparent black;  
			}
		</style>
	</head>
	<body>
		<div class="a1">
			<div class="a2">
				<div class="a3">
					<div class="a4">
						<div class="a5">
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

考试播放器

考试题二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a1{
				height: 500px;
				width: 500px;
				margin: 10px auto;
			}
			.b2{
				height: 100px;
				background-color: red;
				text-align: center;
				color: yellow;
				margin: 5px auto;
			}
			.c3{
				height: 300px;
				width: 290px;
				border: 1px solid darkred;
				float: left;
				margin: 0px  2px 0px 0px;
			}
			.d4{
				height: 300px;
				width: 200px;
				border: 1px solid darkred;
				float: right;
				text-align: right;
				
			}
			.e5{
				height: 80px;
				width: 500px;
				margin: 5px auto;
				background-color: greenyellow;
				float: right;
				text-align: center;
				line-height: 80px;
			}
			p{
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div class="a1">
			<div class="b2">头部区域</div>
			<div class="c3"><p align="left">左</p></div>
			<div class="d4"><p align="right">右</p></div>
			<div class="e5">版权所有</div>
		</div>
	</body>
</html>