考试题一
关于播放器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a1{
width: 500px;
height: 500px;
background-image: linear-gradient(0deg,
margin: 0 auto;
padding: 100px;
box-sizing: border-box;
}
.a2{
width: 300px;
height: 300px;
background-image: linear-gradient(0deg,
border-radius: 30px;
margin: 0 auto;
box-sizing: border-box;
padding: 50px;
}
.a3{
width: 200px;
height: 200px;
background-image: linear-gradient(0deg,
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>
