HTML5应用开发课后习题题库期末考试试卷及答案 (四).pdfVIP

实操题：

1.编写跳一跳游戏，效果如图7-5所示,绘制一个圆与长方形当棋子，绘制一个圆柱形作为跳

图7-5习题1界面效果

DOCTYPEhtml

htmllang=en

head

metacharset-UTF-8

metaname=iewportcontent=width=deice-width,

initial-scale=1.0

metahttp-equi=X-UA-patiblecontent=ie=edge

t〈itle)跳一跳/〈title)

style

*{padding:0;margin:0;}

body{

margin:50px;

)

hl{

color:orange;

text-shadow:lpxlpx3pxrgba(0,0,0,.6);

text-align:center;

}

.game{

position:relatie;

width:800px;

height:400px;

border:3pxdoubleorange;

margin:0auto;

)

.game,content{

position:absolute;

width:700px;

height:400px;

left:0;

top:0;

)

.game#chess(

position:absolute;

width:40px;

height:48px;

oerflow:hidden;

z-index:99;

transition-property:all;

)

.cylinder{

position:relatie;

width:70px;

height:101px;

float:left;

transform-origin:centerbottom;

?

.cylinder.top{

position:absolute;

width:70px;

height:35px;

border-radius:50%;

background:yellow;

z-index:4;

)

.cylinder.front{

position:absolute;

width:70px;

height:70px;

background:black;

margin-top:17px;

z-index:3;

)

.cylinder.bottom{

position:absolute;

width:70px;

height:35px;

border-radius:50%;

background:black;

margin-top:65px;

z-index:4;

)

button{

position:absolute;

width:80px;

height:30px;

outline:none;

color:#fff;

font-size:16px;

text-shadow:lpxIpx3px#000;

text-align:center;

line-