1+x 证书 Web 前端开发初级实操考试（试卷 12）
一、单选题共 30 题，60 分
1. 以下说法正确的是： D
Atable 的表单标签
Btd 的代表行
Ctr 代表列
Dtable 是表格标签
2. 在 javascript 中，执行结果正确的是： B
Atypeof (null) 的结果为 null
Btypeof (typeof (5)) 的结果为 "string"
Ctypeof (5) 的结果为 Number
Dtypeof (typeof (undefined)) 的结果为 undefined
3. 让一个动画名为 fade 的动画持续执行并且在第一次开始时延迟 0.5s 开始，每次动画执行 1s，以下代码正确的是 A
Aanimation:fade 1s 0.5s infinite
Banimation:fade 0.5s 1s infinite
Canimation:fade 1s 0.5s linear
D 以上都不正确
4.CSS3 中可以用（）关键词，自定义字体代表小图标 C
Atransition
Btransform
Cfont-face
Dfont-family
5. 在 javascript 中，执行后输出的结果是： B
var name="zhaonan"; var obj1={ name:"miao", age:20, say:function(){ console.log(this.name); } } var obj2={ name:"xue", age:30, say:function(){ console.log(this.name); } } var f=obj2.say; console.log(f()); var e=f.bind(obj1); console.log(e()); var k=e.bind(obj2); console.log(k());
Azhaonan zhaonan miao
Bzhaonan miao miao
Czhaonan miao xue
Dmiao zhaonan xue
6. 不是 HTML5 的新增的特性是： D
A 新增了很多语义化标签
B 新增了音频和视频
C 新增了本地存储
D 新增伪类
7.css 样式初始化的原因描述错误的是： C
A 清除默认样式
B 由于浏览器的内核不同，对标签的默认样式解析不同，导致显示效果不同，所以需要初始化样式
C 和浏览器没有关系，只是规范而已
D 保证各个浏览器页面效果的一致性
8. 在 jquery 中，常用的 stop ()，关于 stop () 的说法错误的是 D
Astop () 停止当前动画，后续动画继续执行
Bstop (true) 是停止当前动画，后续动画不执行
Cstop (true,true) 是停当前执行的动画，直接跳到当前动画的最终状态，后续动画不执行
Dstop (true,true) 是停当前执行的动画，直接跳到当前动画的最终状态，后续动画继续执行
9. 在 javascript 中，关于数学对象说法正确的是: C
AMath.round (4.5) 的结果是 4
BMath.floor (4.5) 的结果是 5
CMath.ceil (4.5) 的结果是 5
DMath.min (3,4,5) 的结果是 5
10. 对于 addEventListener 绑定事件的说法错误的是 C
A 可以给一元素绑定多个事件
BaddEventListener 中的 this 指绑定的元素
Cdiv.addEventListener ("click",function (),false) 中的 false 代表捕获事件
Ddiv.addEventListener ("click",function (),false) 中的 false 代表冒泡事件
11. 对闭包的理解说法错误的是： A
A 闭包不能避免全局污染
B 闭包可以将内部函数保存到外部的时候
C 可以从外部访问内部变量
D 闭包把外部变量保存到内存中不被释放，导致内存泄漏。
12. 设置一个 div 元素的外边距为上：20px, 下：30px, 左：40px, 右：50px，下列书写正确的是：D
Apadding:20px 30px 40px 50px;
Bpadding:20px 50px 30px 40px;
Cmargin:20px 30px 40px 50px
Dmargin:20px 50px 30px 40px
13. 块级元素说法正确的是： B
A 块级元素和其他元素在一行显示
B 块级元素对宽和高，边距生效
C 块级元素对宽和高生效，边距不生效
D 块级元素对宽，高，边距都不生效
14. 关于 jQuery 中删除已有元素的方法说法正确的是（） C
Aremove () 从被选元素中删除子元素
Bremove () 删除被选元素（不会删除其子元素）
Cempty () 从被选元素中删除子元素
Dempty () 删除被选元素及其子元素
15. 在 jquery 中，下列哪一个是用来查找表单中所有隐藏元素的 B
Avisible
Bhidden
Cvisible()
Dhidden()
16. 设置文字的大小为 14px，加粗，行高为 28px，字体是微软雅黑，字体是倾斜的，以下书写正确的是：D
Afont:14px "微软雅黑" 28px 600 italic
Bfont:"微软雅黑" 14px/28px 600 italic
Cfont:14px/28px 600 "微软雅黑" italic
Dfont:600 italic 14px/28px "微软雅黑"
17. 在 javascript 中，数据类型转换正确的是： A
ANumber ("123abc") 的值为 NaN
BparseInt ("123abc") 的值为 NaN
CparseInt ("10",8) 的值为 10
DparseFloat ("abc123.3") 的值为 123.3
18. 对于事件流说法错误的是：C
A 事件流分为三个阶段
B 事件流分捕获阶段、目标节点、冒泡阶段
C 捕获和冒泡同时存在先执行冒泡阶段
D 目标阶段存在捕获和冒泡，按顺序执行
19. 在开发过程中，图片下面有 1 像素的小间隙，如何去除： B
A 给图片设置 font-size:0
B 给图片设置 display:block
C 给图片设置 border:0
D 给图片设置 border:none;
20.css3 中的伪类 div p:nth-of-type (3){color:red} 的说法正确的是：B
A 给 div 元素的第三个子元素设置文字颜色为红色
B 给 div 元素的后代元素的第三个 p 元素设置文字颜色为红色
C 给 div 的后代元素 p 设置文字颜色为红色
D 以上说法都不正确
21. 在 jquery 中，下列哪一个是用将 $(“<p></p>”) 来追加到指定元素末尾的（）C
AinsertAfter()
Bappend()
CappendTo()
Dafter()
22.Jquery 中，找到所有子元素的方法是： C
Afind()
Bsiblings()
Cchildren()
Dparent()
23. 在 javascript 中，下列转 Boolean 后值为 false 的是： B
ABoolean(" ")
BBoolean(0)
CBoolean([])
DBoolean({})
24. 设置背景颜色为 green, 背景图片垂直居中显示，背景图片充满整个区域，但是背景图片不能变形，图片只出现一次，以下书写正确的是： A
- *A*background:url("../img/img1.jpg") no-repeat center/cover green;- *B*background:url("../img/img1.jpg") repeat center/cover green;- *C*url("../img/img1.jpg") no-repeat center/100% green;- *D*url("../img/img1.jpg") no-repeat center/100% 100% green;25.css3 中用什么来定义过渡动画的时间 C
Atransition-property
Btransition-timing-function
Ctransition-duration
Dtransition-delay
26. 在 javascript 中，获取今天是星期几的方法是： C
Anew Date().getDate()
Bnew Date().getTime()
Cnew Date().getDay()
Dnew Date().getFullYear()
27. 在 javascript 中，执行下列代码后输出的结果是： if (function (){}){ console.log (1); } else { console.log (2); } B
A2
B1
C 什么也不输出
D 报错
28. 下列属于内联元素的是： B
Adiv
Ba
Cp
Dtable
29. 在 javascript 中，执行下列代码输出的结果是： console.log (+"5"*2+"6"-"4"+true) B
A13
B103
C104
D12true
30. 在 javascript 中，执行下列代码输出的结果是： for (var i=0;i<4;i++){ console.log (i) } console.log (i) A
A0 1 2 3 4
B0 1 2 3 4 5
C0 1 2 3
D4 4 4 4
二、多选题共 15 题，30 分
1. 关于 @media 书写正确的是： AB
A@media screen and (max-width: 300px)
B@media only screen and (max-width: 500px)
C@media screen (max-width: 500px)
D@media (max-width: 500px)
2. 关于选择器优先级正确的是： AC
Aid 选择器 > 类选择器 > 标签选择器
Bid 选择器 >!important > 类选择器 > 标签选择器 > 通配符
C!important>id 选择器 > 类选择器 > 标签选择器
Did 选择器 > 类选择器 > 标签选择器 >!important
3. 关于 doctype html 说法正确的是： BC
A 区分大小写，只有 <!DOCTYPE html> 才是正确的
B 这句话的作用是告诉浏览器以什么标准去解析网页
C 这句话可以省略，省略后页面呈怪异模式
D 以上说法都正确
4.javascript 中，关于 parseInt () 说法正确的是： AB
A 将其他类型的数据转成数值
B 可以将其他进制的数据转成十进制
CparseInt () 与 Number () 方法功能相同
D 以上说法都正确
5. 下列属于 jquery 选择器的是： ABCD
A 基本选择器
B 层级选择器
C 属性选择器
D 位置选择器
6. 下面哪几种是 Jquery 中表单的对象属性： ABD
A:checked
B:enabled
C:hidden
D:selected
7. 引入样式的方法有哪几种 ABCD
A 内联样式
B 内部样式
C 外部样式
D 以上都正确
8. 在 form 标签中，属性 method 的值有哪些 BC
Arequest
Bget
Cpost
D 以上都正确
9. 以下关于标签的嵌套书写错误的是： ABCD
- *A*<p><p></p></p>- *B*<a href=""><a href=""></a></a>- *C*<ul><h2></h2><li></li><li></li></ul>- *D*以上都是错误的
10.javascript 中，循环语句有哪些？ BCD
Aif
Bwhile
Cdo while
Dfor
11.javascript 中，下列结果为 NaN 的是： ABCD
ANumber("adfa")
BparseInt("undefined")
CparseInt("null")
DparseInt("")
12.javascript 中，下列表达式结果为 true 的是： BCD
A[]==[]
B![]==false
C[]==false
D[0]==false
13. 下列对于 float 属性的特点说法错误的是： ABC
Afloat 能向左和向右移动，也可以上下移动
Bfloat 会占据原有空间
C 清除浮动的作用不大，可以省略
D 给父级元素设置 height 可以清除浮动
14.jQuery 中遍历节点的方法，正确的是 ABD
Anext () 取得匹配元素后面紧邻的同辈元素
Bprev () 取得匹配元素前面紧邻的同辈元素
Csiblings () 取得匹配元素前的所有同辈元素
Dparent () 取得元素的父级元素
15. 以下属于 HTML5 新标签的是： BCD
Atitle
Bouput
Cnav
Daside
三、判断题共 5 题，10 分
1.jquery 中获取元素宽度包含 padding 的方法是 innerwidth () 对
A 对
B 错
2. 在 javascript 中，this 都指向调用者 错
A 对
B 错
3.html 是一种超文本标记语言 A
A 对
B 错
4. 在 javascript 中，document.getElementById 返回一组元素 错
A 对
B 错
5.CSS 中设置字符间距的是 word-spacing 错
A 对
B 错
四、客观填空题共 5 题，100 分
1. 阅读下列说明、效果图和 HTML 代码，进行静态网页开发，填写（1）至（20）代码。
【说明】
这是资源管理平台，用 html+css 完成。
项目包含首页 index.html、css 文件夹、img 文件夹，其中，css 文件夹包含 base.css 文件；img 文件夹包含用到的图片。
请根据效果图和已提供的代码，补全（1）-（20）中的代码。
【效果图】
index.html 在 PC 端效果如图所示。
【素材】
【代码：首页index.html】<!-- 声明 -->1<html><head> <!-- 设置编码为utf-8 --> <meta2="UTF-8"> <title>资源中心-首页</title> <!-- 引入样式 --> <3href="css/base.css" rel="4"></head><body><!--公用头部导航开始--><div> <div> <div class="top_nav fl"> <ul> <!-- 填写链接属性 --> <li><a5="#">平台首页</a><span></span></li> <li><a href="#">个人中心</a><span></span></li> <li><a href="#">我的主页</a><span></span></li> <li><a href="#">学习中心</a><span></span></li> <li><a href="#">资源中心</a><span></span></li> </ul> </div> <div class="top_secher fl"> <!-- 插入图片 --> <67 ="img/xiaobiao_img3.jpg"> <input type="text"> </div> <div class="top_info fr"> <ul> <li> <img src="img/xiaobiaio_tx.jpg" width="46" height="46"> </li> <li>李凤鸣同学<span>1</span></li> <li> <div> <img src="img/xiaobiao_img1.jpg"> </div> </li> <li> <div> <img src="img/xiaobiao_img2.jpg"> </div> </li> </ul> </div> </div></div><!--公用头部导航结束--></body></html>【代码：CSS文件base.css】@charset "utf-8";/* CSS Document *//*样式重置*/body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,hr,span,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0; 8;/*清除列表样式*/}body,html{9:"Microsoft YaHei";/*设置字体*/font-size: 14px;}a{10;/*去掉下划线*/}img{border:none; display:block; margin: 0 auto;}input,select,textarea{outline:none;border:none; background-color:11;/*设置背景透明*/}input:focus { outline: none; }textarea{12;/*阻止手动改变文本框大小*/}/*清除浮动*/.clearfix:after{content:"";display:block;clear:both;}.fl{float:left;}.fr{float:right;}/*头部样式*/.top{ width:100%; margin:0; padding:0; height:60px; background-color:#FFCF4E; 13;/*设置固定定位*/ 14: 9999;/*设置层级*/}.top_conten{ width:1200px; margin:0 auto; 15;/*设置相对定位*/}.top_nav ul{ margin-left: 0px;}.top_nav ul li{ position:relative;float: left; text-align: center; color: #383337; font-size: 16px; 16: 40px; /*设置行高*/padding-top: 7px;margin: 0 15px;}.top_nav ul li a{ color: #383337;}.top_nav ul .cur{ border-bottom: 1px solid #383337;}.top_nav ul .cur a{color:#383337;}.top_nav span{display:inline-block;position:absolute;bottom:-1px;left:50%;margin-left:-35px;width:70px;height:1px;background:#383337;overflow:hidden;17:18(0);/*放大*/}.top_nav ul li:hover span{transform:scale(1);19:all .5s ease;/*设置过渡时间*/}.top_secher{ margin-top:18px; border:none; width: 0; line-height: 24px; height: 24px; border-radius: 13px; text-align: left; transition: all .5s ease;}.top_secher img{ margin-left: 4px; margin-top: 3px; width: 19px; display:block; float: left;}.top_secher input{ width: 120px; float: left; margin-left: 28px; line-height: 24px; position: absolute;}.top .open{ width: 158px; border: 1px solid #343434; transition: all .5s ease;}.top_info ul li{ float:left; margin:0 10px; height:46px; margin-top:7px; display:table; line-height:46px; position:relative;}.top_info ul li > div{ display:table-cell; vertical-align:middle;text-align: center; cursor:pointer;}.top_info ul li span{ background-color: #FF4A1F; border: 1px solid #fff; color: #fff; padding: 0 4px; font-size: 12px; line-height: 15px; top:3px; left: 68px; position: absolute; 20: 50%;/*设置圆角*/}打开解析（1）<!DOCTYPE html>（2）charset（3）link（4）stylesheet（5）href（6）img（7）src（8）list-style: none（9）font-family（10）text-decoration: none;（11）transparent（12）resize:none;（13）position: fixed （14）z-index（15）position:relative（16）line-height（17）transform（18）scale（19）transition（20）border-radius
阅读下列说明、效果图和 HTML 代码，进行静态网页开发，填写（1）至（10）代码。
【说明】
这个某项目中的其中一部分，应用 HTML5 和 css3 技术完成页面的布局。项目包含主页 index.html、style.css 和 img。要求鼠标经过翻转出现遮罩层，根据效果图和已有的代码补全（1）-（10）的代码
【效果图】
【素材】
素材.zip
【代码：主页 index.html】此页代码在此省略，请在 “实操代码” 中第二题查看
【代码：style.css】
.clearfix:after{ display:block; content:''; 1;/*清除浮动*/}.clearfix{ zoom:1; 2;/*文字居中*/}.fl{ float:left;}.fr{ float:right;}.part5 .tBox{ width: 1154px; height: 430px; margin: 30px auto 0; position: relative;}.part5 .tBox .picBox{ width: 1000px; margin: 0 auto;/*盒子居中*/ height: 100%; 3;/*溢出隐藏*/ position: relative;}.part5 .tBox .picBox .roll{ position: relative; margin-right: 24px; perspective: 1000px; 4;/*鼠标经过变小手状态*/}/*最后一个元素*/.part5 .tBox .picBox .roll:last-child{ margin-right:0;}.part5 .tBox .picBox li .bg{ width: 100%; height: 65px; background:5; /*背景黑色透明80%*/ position: absolute; left: 0; bottom: 0;}.part5 .tBox .picBox li h3{ position: absolute; left: 0; bottom: 0; width: 100%; height: 65px; text-align: left; padding-left: 13px;}.part5 .tBox .picBox li .tName{ font-size: 18px; color: #fff; padding-top: 13px; margin-bottom: 5px;}.part5 .tBox .picBox li .tTitle{ font-size: 12px; color: #b4b4b4;}.roll .box-content{ width: 100%; height: 480px; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.8); transform:6;/*Y轴旋转90度*/ transition: all 0.50s ease-in-out 0s;/*过渡效果*/ overflow: hidden;}.roll .box-img{ transform: rotateY(0); transition: all 0.50s ease-in-out 0s;/*过渡效果*/}.roll:hover .box-img{ transform:7;/*Y轴旋转-90度*/}.roll:hover .box-content{ transform:8;/*Y轴旋转0度*/;}.roll .box-content .t1{ font-size: 20px; 9: bold;/*文字加粗*/ color: #fff; padding-top: 50px;}.roll .box-content .t2{ font-size: 16px; color: #fff; padding-top: 12px;}.roll .box-content .t3{ width: 190px; height: 1px ; background: #fff; margin: 20px auto 0;}.roll .box-content .t4{ font-size: 14px; width: 182px; 10;/*文字两端对齐*/ color: #fff; margin: 20px auto 0;}打开解析（1）clear:both （2）text-align: center （3）overflow: hidden（4）cursor: pointer（5）rgba(0,0,0,.8)（6）rotateY(90deg)（7）rotateY(-90deg)（8）rotateY(0)（9）font-weight（10）text-align: justify
阅读下列说明、效果图和代码，用 jquery 完成指定功能。
【说明】
先要完成一个通讯录，在需要添加人员的时候，点击 “添加行”，当点击删除的时候，序号需要重新排序。同时为了提高用户体验，需要用 js 实现隔行换色。请根据现有的代码和效果图补全代码（1）-（10）
【效果图】
【素材】
【index.html】<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>通讯录</title> <link rel="stylesheet" href="css/style.css"> <!-- 引入jq库 --> <script src="1"></script> <script src="js/index.js"></script></head><body> <div class="box"> <!-- 表格居中 --> <table2="center"> <!-- 表格标题 --> <3>通讯录</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>13754448888</td> <td> <button>删除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>13788889999</td> <td> <button>删除</button> </td> </tr> </tbody> </table> <button class="add">添加一行</button> </div></body></html>【style.css】.box{ width: 400px; margin:30px auto; text-align: center;}.box>button{ width: 100%; height: 40px; margin-top:20px; border:none; border-radius: 10px; background-color: green; color:#fff;}table{ width:400px; text-align:center; /*边框重叠*/ 4;}table caption{ height: 60px; line-height: 60px; font-weight: 600;}table th{ background-color: #f5f5f5;}table,td,th{ border:1px solid #ccc;}table tr{ height:50px;}【index.js】$(function(){ // 添加行 绑定点击事件 $(".add").5(function(){ var newTr=$("<tr></tr>"); for(i=0;i<$("thead>tr>th").length;i++){ newTd=$("<td></td>"); if(i==0){ newTd.text($("tbody>tr").length+1); } if(i==$("thead>tr>th").length-1){ //设置标签内容 newTd.6("<button>删除</button>") } //追加节点 newTd.7(newTr); }; $("tbody").append(newTr); changeColor(); }) // 隔行换色 function changeColor(){ $("tbody tr:odd").css("background","#f5f5f5"); $("tbody tr:even").css("background","#fff"); } changeColor(); // 删除行 $("tbody").8("click","button",function(){ $(this).parents("tr").remove(); changeColor(); order(); }); //重新排序 function order(){ $("tbody tr").9(function(index){ $(this).children().eq(0).text(10); }); }})打开解析（1）js/jquery.min.js（2）align（3）caption（4）border-collapse: collapse（5）click（6）html（7）appendTo（8）on（9）each（10）index+1
4. 阅读下列说明，用 javascript 编写程序。填写（1）至（10）代码。
【说明】
在某项目中，在首页需要实现左右轮播的效果图，要求用 javascript 完成，根据已经提供的代码，补全（1）-（10）位置上的代码。
【效果图】
【素材】
素材.zip
【index.html】
布局结构如下代码，并将样式引入。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>第三题-无缝轮播</title> <link rel="stylesheet" href=""> <link rel="stylesheet" type="text/css" href="css/lunbo.css"></head><body><div class="banner" id="banner"> <ul class="clear" style="left:-100%"> <li><img src="img/index-banner3.jpg"></li> <li><img src="img/index-banner1.jpg"></li> <li><img src="img/index-banner2.jpg"></li> <li><img src="img/index-banner3.jpg"></li> <li><img src="img/index-banner1.jpg"></li> </ul> <div id="left"></div> <div id="right"></div> <div id="pageNav"></div></div><script src="js/index.js"></script></body></html>【style.css】body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{ margin:0; padding:0;}ul,ol{ list-style:none;}img{ display:block;}.clear:after{ content:""; display:block; clear:both;}.banner{ position:relative; width:100%; overflow:hidden;}.banner ul{ position:relative; width:500%;}.banner ul li{ width:20%; float:left;}.banner ul li img{ width:100%;}#left,#right{ position:absolute; top:50%; margin-top:-25px; width: 50px; height:50px; cursor:pointer; background-color: rgba(0,0,0,0.4);}#left{ left:0;}#right{ right:0;}#left:hover,#right:hover{ background-color: rgba(0,0,0,0.8);}#pageNav{ position: absolute; bottom:20px; left:50%; transform:translateX(-50%);}#pageNav a{ display:inline-block; margin:0 5px; width:15px; height:15px; background-color: #fff; border-radius:50%;}#pageNav a.cur{ background-color: orange;}【index.js】// 获取元素//（1）根据标签获取元素var banner=document.getElementById("banner"), ul=banner.1("ul")[0], li=ul.getElementsByTagName("li"), leftBtn=document.getElementById("left"), rightBtn=document.getElementById("right"), pageNav=document.getElementById("pageNav"), index=0, timer=null, animate=false;// 追加小圆点for(var i=0;i<li.length-2;i++){//创建元素 var pageA=2("a");if(i==0){//设置类名 pageA.3="cur";}//追加节点 pageNav.4(pageA);}// 给小圆点绑定点击事件var aBtn=pageNav.getElementsByTagName("a");for(var j=0;j<aBtn.length;j++){//记录索引值 5; aBtn[j].onclick=function(){ if(animate){ return }//计算偏移量 var offset=6; //传参-当前点击对象的索引值 btnShow(7); imgShow(offset); index=this.index; }} // 小圆点点亮function btnShow(num){ for(var i=0;i<aBtn.length;i++){ aBtn[i].className=""; } aBtn[num].className="cur";} // 切换图function imgShow(offset){ animate=true; var speed=offset/10; var newLeft=parseInt(ul.style.left)+offset; var go=function(){ if(speed<0&&parseInt(ul.style.left)>newLeft || speed>0 && parseInt(ul.style.left)<newLeft){ ul.style.left=parseInt(ul.style.left)+speed+"%"; //延时计时器 8(go,50); }else{ ul.style.left=(index+1)*(-100)+"%"; animate=false; } } go();}// 给左右箭头绑定点击事件leftBtn.onclick=function(){ if(animate){ return } index--; if(index<0){ index=aBtn.length-1; } btnShow(index); imgShow(100);}rightBtn.onclick=function(){ if(animate){ return } index++; if(index==aBtn.length){ index=0; } btnShow(index); imgShow(-100);}// 自动轮播function lunbo(){ rightBtn.onclick();}timer=setInterval(lunbo,3000);// 鼠标经过Banner区域清除计时器banner.onmouseover=function(){ 9;}// 鼠标离开继续自动轮播banner.10=function(){ console.log(1); timer=setInterval(lunbo,3000);}打开解析（1）getElementsByTagName（2）document.createElement（3）className（4）appendChild（5）aBtn[j].index=j（6）(this.index-index)*(-100)（7）this.index（8）setTimeout（9）clearInterval(timer)（10）onmouseout
5. 阅读下列说明、效果图和代码，完成移动端布局。
【说明】
在某项目中，项目中的文件包含 index.html、style.css 和 images 文件夹。请根据现有的代码和效果图补全代码（1）-（5）
【效果图】
【素材】
素材.zip
【index.html】
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>在线公开课学习app</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" /> <link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><header> <div> <div> <i class="icon icon-search"></i> <input type="text" placeholder="搜索课程"> </div> </div></header><section> <div> <img src="images/banner.png" alt=""> </div> <div> <a href="javascript:;"> <div> <img src="images/nav-001.png" alt=""> </div> <div> <h2>临床学院</h2> </div> </a> <a href="javascript:;"> <div> <img src="images/nav-002.png" alt=""> </div> <div> <h2>科研学院</h2> </div> </a> <a href="javascript:;"> <div> <img src="images/nav-003.png" alt=""> </div> <div> <h2>医考学院</h2> </div> </a> <a href="javascript:;"> <div> <img src="images/nav-004.png" alt=""> </div> <div> <h2>科员学院</h2> </div> </a> </div> <div> <h1>精品推荐</h1> </div> <div> <a href="javascript:;"> <div> <img src="images/pd-001.png" alt=""> </div> <div> <h3>从基础到实战：全面讲解补液</h3> <p>￥215.00 <i>新课特惠</i> <em>￥398</em> </p> </div> </a> <a href="javascript:;"> <div> <img src="images/pd-002.png" alt=""> </div> <div> <h3>Meta 分析零基础的实用教程</h3> <p>￥215.00 <em>￥398</em> </p> </div> </a> <a href="javascript:;"> <div> <img src="images/pd-003.png" alt=""> </div> <div> <h3>脊柱MRI进阶指南 分析零基础的实用教程</h3> <p>￥215.00 <i>新课特惠</i> <em>￥398</em> </p> </div> </a> <a href="javascript:;"> <div> <img src="images/pd-004.png" alt=""> </div> <div> <h3>从基础到实战：全面讲解补液</h3> <p>￥215.00<em>￥398</em> </p> </div> </a> </div></section></body></html>【style.css】html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td { margin: 0; padding: 0;}html,body { color: #333; margin: 0; height: 100%; font-family: '微软雅黑'; font-weight: normal;}* { box-sizing: border-box;}a { text-decoration: none; color: #000;}img { width: 100%; height: auto; display: block; border: 0;}body { background: #fff; color: #666;}ul,ol{ list-style: none;}.clearfix::after { clear: both; content: ""; display: block;}.header{ height: 44px; position: relative; display: flex; z-index: 102; background:#fefefe;}.header .center{ -webkit-box-ordinal-group: 3; 1;/*设置弹性盒子*/ justify-content: center; align-items: center; height: 44px; width: 90%; margin-left: 4%;}.search-box { background: #ededed; border-radius: 22px; position: relative; width: 100%; margin: 0 auto; height: 32px;}.icon-search { position: absolute; background-image: url("../images/index.png"); left: 8px; top: 0.4rem; background-size: 19px;}.search-box input { width: 100%; background: none; border: none; font-size: 0.85rem; text-align: left; height: 32px; border-radius: 3px; padding: 0.55rem 0 0.55rem 1.8rem;}.scrollView { width: 100%; height: 100%; 2;/*剩余空间全部分给该盒子*/ overflow-y: auto; overflow-x: hidden; position: relative; padding-bottom: 53px;}.slider-wrapper { display: flex; width: 96%; margin:0 auto; transform: translate3d(0px, 0px, 0px); position: relative; z-index: 1; padding:0.55rem;}.slider-wrapper img { width: 100%; height: auto; display: block; border: none;}.item { width: 96%; margin:0 auto; padding: 0.5rem; position: relative; overflow: hidden; display: flex; justify-content: space-between;}.palace-grid .palace-grid-icon{ width: 40px; height: 40px; margin:0 auto;}.palace-grid .palace-grid-text { display: block; text-align: center; color: #333; font-size: 0.85rem; 3;/*阻止换行*/ 4;/*文字溢出显示省略号*/ overflow: hidden; padding-top: 0.2rem;}.palace-grid .palace-grid-text h2 { font-size: 0.8rem; font-weight: normal; color: #666666;}.flex { display: flex; align-items: center; padding: 15px; position: relative;}.flex h1 { flex: 1; min-width: 0; font-size: 14px; color: #333;}.list-theme{ width: 96%; margin:0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;}.list-item { width: 46%; margin: 0 2% 2% 2%; background: #fff; display: block; overflow: hidden;}.list-theme-message { background: #fff; padding: 0.3rem 0;}.list-theme-title { color: #333; font-size: 0.92rem; margin: 0.2rem 0; overflow: hidden; font-weight: normal; white-space: nowrap;/*阻止换行*/ text-overflow: ellipsis;/*文字溢出显示省略号*/}.list-theme-message p { color: #f68f40; font-size: 0.99rem; font-weight: 500; height: 1.5rem;}.list-theme-message p i { font-style: normal; font-size: 0.7rem; border: 1px solid #f68f40; border-radius: 2px; padding: 0 0.2rem;}.list-theme-message p em { font-style: normal; font-size: 0.7rem; padding: 0 0.2rem; color: #999999; 5;/*删除线*/}打开解析（1）display: flex（2）flex: 1（3）white-space: nowrap（4）text-overflow: ellipsis（5）text-decoration: line-through
1+x 证书 web 前端开发初级对应课程分析
http://blog.zh66.club/index.php/archives/194/
1+X 证书 Web 前端开发中级对应课程分析
http://blog.zh66.club/index.php/archives/195/
1+x 证书 Web 前端开发初级理论考试样题 2019
http://blog.zh66.club/index.php/archives/149/
1+x 证书 Web 前端开发初级实操考试样题 2019
http://blog.zh66.club/index.php/archives/150/
1+x 证书 Web 前端开发中级理论考试样题 2019
http://blog.zh66.club/index.php/archives/151/
1+x 证书 Web 前端开发中级实操考试样题 2019
http://blog.zh66.club/index.php/archives/152/
1+x 证书 Web 前端开发初级理论教案
http://blog.zh66.club/index.php/archives/322/
1+x 证书 Web 前端开发中级理论教案
http://blog.zh66.club/index.php/archives/320/
1+x 证书 Web 前端开发中级理论考试（试卷 1）
http://blog.zh66.club/index.php/archives/153/
1+x 证书 Web 前端开发中级理论考试（试卷 2 ）
http://blog.zh66.club/index.php/archives/154
1+x 证书 Web 前端开发中级理论考试（试卷 3 ）
http://blog.zh66.club/index.php/archives/170/
1+x 证书 Web 前端开发中级理论考试（试卷 4 ）
http://blog.zh66.club/index.php/archives/191/
1+x 证书 Web 前端开发中级理论考试（试卷 5 ）
http://blog.zh66.club/index.php/archives/297/
1+x 证书 Web 前端开发中级理论考试（试卷 6）
http://blog.zh66.club/index.php/archives/319/
1+x 证书 Web 前端开发中级理论考试（试卷 7 ）
http://blog.zh66.club/index.php/archives/436/
1+x 证书 Web 前端开发中级理论考试（试卷 7 ） 答案
http://blog.zh66.club/index.php/archives/437/
1+x 证书 Web 前端开发中级理论考试（试卷 8 ）** 含答案
http://blog.zh66.club/index.php/archives/438/
1+x 证书 Web 前端开发中级理论考试（试卷 9 ）含 PDF 高清版
http://blog.zh66.club/index.php/archives/439/
1+x 证书 Web 前端开发初级级理论考试（试卷 2 ）
http://blog.zh66.club/index.php/archives/176/
1+x 证书 Web 前端开发初级级理论考试（试卷 3 ）
http://blog.zh66.club/index.php/archives/299/
1+x 证书 Web 前端开发初级级理论考试（试卷 4 ）
http://blog.zh66.club/index.php/archives/315/
1+x 证书 Web 前端开发初级理论考试（试卷 5 ）
http://blog.zh66.club/index.php/archives/406/
1+x 证书 Web 前端开发初级实操考试（试卷 5 ）
http://blog.zh66.club/index.php/archives/408/
1+x 证书 Web 前端开发初级理论考试（试卷 6 ）
http://blog.zh66.club/index.php/archives/410/
1+x 证书 Web 前端开发初级实操考试（试卷 6 ）
http://blog.zh66.club/index.php/archives/411/
1+x 证书 Web 前端开发初级理论考试（试卷 7 ）
http://blog.zh66.club/index.php/archives/412/
1+x 证书 Web 前端开发初级理论考试（试卷 8 ）
http://blog.zh66.club/index.php/archives/414/
1+x 证书 Web 前端开发初级实操考试（试卷 8 ）
http://blog.zh66.club/index.php/archives/422/
1+x 证书 Web 前端开发初级理论考试（试卷 9 ）
http://blog.zh66.club/index.php/archives/424/
1+x 证书 Web 前端开发初级理论考试（试卷 10 ）
http://blog.zh66.club/index.php/archives/430/
1+x 证书 Web 前端开发初级实操考试（试卷 10 ）
http://blog.zh66.club/index.php/archives/431/
1+x 证书 Web 前端开发初级实操考试（试卷 11 ）
http://blog.zh66.club/index.php/archives/433/
1+x 证书 Web 前端开发入训能力水平测试初级一卷
http://blog.zh66.club/index.php/archives/409/
《Web 前端开发》等级考试样题～以国家 “1+X” 职业技能证书为标准，厚溥推出 Web 前端开发人才培养方案
http://blog.zh66.club/index.php/archives/156/
pdf 版查看链接六套完整版
http://blog.zh66.club/usr/uploads/2019/12/4294434490.pdf
http://blog.zh66.club/usr/uploads/2019/12/2430725541.pdf
http://blog.zh66.club/usr/uploads/2019/12/761774577.pdf
http://blog.zh66.club/usr/uploads/2019/12/77517732.pdf
http://blog.zh66.club/usr/uploads/2019/12/733177909.pdf
http://blog.zh66.club/usr/uploads/2019/12/3679037667.pdf
