Web前端开发初级实操考试.docx

第

第PAGE7页共NUMPAGES13页

考生姓名 准考证号

2020年下半年 Web前端开发初级 实操考试

（考试时间14:00-16:30共150分钟）

1.本试卷共4道题，满分100分。

2.请在指定位置或开发环境下作答。

试题一（24分）

阅读下列说明、效果图和HTML及CSS代码，进行静态网页开发，填写（1）至（12）代码。

【说明】

现在根据项目需求，需要实现跳动的心，项目中包含index.html、css文件夹、img文件夹。

【效果图】

图1-1

【代码：头部index.html】

!--?补齐HTML的头标记?--

!_____(1)_____?html

html

????head

????????!--?完成外部样式的引入?--

????????_____(2)_____?rel=stylesheet?href=css/index.css

????????meta?charset=UTF-8

????????!--?填入合适的标签名?--

????????_____(3)_____跳动的心_____(4)_____

????/head

????body

???????!--?结合上下文选择合适的选择器--

????????div?_____(5)_____=chest

????????????div?class=left?heart?side/div

????????????div?class=center?heart/div

????????????div?class=right?heart?side/div

????????/div

????/body

/html

【代码：CSS文件index.css】

body{

????margin:?0;

????padding:?0;

????background-color:?pink;

}

.chest{

????width:?500px;

????height:?500px;

????margin:?_____(6)_____;????/*设置盒子左右居中，上下边距为50px*/

????position:?_____(7)_____;???????/*设置相对定位*/

}

.heart{

????width:?210px;

????height:?210px;

????position:_____(8)_____;????/*设置绝对定位*/

????background:?_____(9)_____(-90deg,#B80734?-306%,#d5093c?48%);/*设置线性渐变*/

????animation:?beat?0.7s?ease?0s?_____(10)_____;/*设置无限次循环*/

}

.center{

????transform:?_____(11)_____;???/*绕着z轴旋转45°*/

????left:145px;

????top:145px;

}

.side{

????border-radius:?105px;??

}

.right{

????right:?68px;

????top:?68px;

}

.left{

????left:?68px;

????top:?68px;

z-index:3;?

}

/*定义动画*/

_____(12)____?beat{

????0%{?

????????transform:?scale(1)?rotate(45deg);

????????box-shadow:?0?0?40px?#d5093c;

????}

????50%{

????????transform:scale(1.1)??rotate(45deg);???/*缩放1.1倍*/

????????box-shadow:?0?0?70px?#d5093c;

????}

????100%{

????????transform:?scale(1)??rotate(45deg);

????????box-shadow:?0?0?40px?#d5093c;

????}

}

【问题】（24分，每空2分）

进行静态网页开发，补全代码，在（1）至（12）处填入正确的内容。

试题二（28分）

阅读下列说明、效果图，进行静态网页开发，填写（1）至（14）代码。

【说明】

根据业务需求，需要完成全选和反选功能如图2-1。包含首页index.html、css文件夹，其中，css文件夹包含index.css文件。

请根据图中的效果和提供的代码，在对应代码处将空缺代码补全。

【效果图】

图2-1

【代码：index