Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx

1、Web前端开发职业技能考试初级Web前端开发初级实操考试V10考生姓名 准考证号 2019年下半年 Web前端开发初级 实操考试（考试时间14：00-16:30 共150分钟）1. 本试卷共4道题，满分100分。2. 请在指定位置或开发环境下作答。试题一（20分）阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。【说明】在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本项目为“搜索引擎”网站。项目名称为Search，包括搜索主页面index.html、第一个标签页tab1.html、第二个标签页tab2.html和img文件夹，其中，i

2、mg文件夹包括图片logo.png。页面布局和内容为：（1）index.html为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索结果。其中，搜索结果使用iframe标签定义，显示tab1.html或tab2.html。（2）tab1.html为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用2个table进行布局。（3）tab2.html为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用1个table进行布局。选择不同的类别标签，会显示该类别下的搜索结果。【效果图】（1）打开ind

3、ex.html效果如图1所示。图1-1（2）点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。图1-2【代码：搜索主页index.html】 S 搜索 .search_val width: 400px;margin-bottom: 20px;/*设置搜索框为400px，底部外边距为20px*/ amargin-right: 20px/*设置a链接的右边距为20px*/ 标签页1-网页 标签页2-资讯 【代码：第一个标签页tab1.html】 搜索 body font-size: 13px;/*设置页面字体大小为13px*/ p width: 380px;/*设置p元素的

4、宽度为380px*/ p,h3 margin: 0;padding: 0;/*设置内边距和外边距均为0 */ .noPicwidth: 460px;/*设置类名为noPic的元素的宽度为460px*/ img padding: 10px;/*设置图片的内边距为10px*/ （8） 超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等. http:/HTML.com HTML Standard 1.2 Is this HTML5?This section is non-normative.In short: Yes.In more length: the te

5、rm HTML5 is widely used as a buzzword to refer . http:/HTMLS 1 2 3 4 【代码：第二个标签页tab2.html】 搜索 body font-size: 13px;/*设置页面字体大小为13px*/ td padding: 10px;/*设置td单元格的内边距为10px*/ p width: 450px;/*设置p元素的宽度为450px*/ p,h3 （10）/*设置内边距和外边距均为0 */ 实现实时Html编辑器 给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲

6、染,而且这些实现都非常简单. http:/HTML.com html中q标签(短的引用)的详细介绍 本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下! 学习html其实就是学习标签的用法,今天小编要介绍的是. http:/HTMLS 1 2 3 4 【问题】（20分，每空2分）进行静态网页开发，补全代码，在（1）至（10）处填入正确的内容。试题二（30分）阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写（1）至（15）代码。【说明】这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQu

7、ery，现在我们需要编写该网站首页样式。项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。首页（index.html）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。对页面样式进行设计，要求为：（1）页面全局样式：设置页面全局属性，页面外边距和内边距为“0

8、”，字体为“宋体”，字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。（3）【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术log

9、o】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；为【技术特点】中列表设置文本内容“居左”。【效果图】图2-1【代码：首页index.html】Web技术社区 欢迎来到XX网 本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。 本站致力于推广各种前端技术，所有资源. HTML 指的是超文本标记语言 /* .省略其它li，参见【效果图】内容 */ CSS 指层叠样式表 /* .省略其它li，参见【效果图】内容 */ JavaScript 是一种轻量级的编程语言/* .省略其它li，参

10、见【效果图】内容 */ jQuery是一个JavaScript函数库/* .省略其它li，参见【效果图】内容 */ 【代码：CSS文件index.css】（3） margin: 0;（4）;/* 内边距 */（5）;/* 字体 */font-size: 35px;body animation-name: fadeIn; （6）;animation-iteration-count: 1;（7） fadeIn from opacity: 0; to opacity: 1;#introduction （8）;/* 背景颜色 */width:100%;height:400px;（9）;/* 字体颜色

11、*/#content （10）;/* 绝对布局 */（11）;/* 顶部边距 */left: 16%; width: 68%; text-align: center;#main （12）; text-align: center;#main img （13）;border-radius: 20px; height: 200px; width: 200px;.card width: 17%; margin: 4%;（14） /* 列表样式，以class加子元素选择器的方式填写 */ （15）;【问题】（30分，每空2分）开发网页动态页面样式，补全代码，在（1）至（15）处填入正确的内容。试题三（3

12、0分）阅读下列说明、效果图和HTML代码，进行网页编程，回答问题1至问题5。【说明】随着个性化服务发展，学校、街边、社区等都流行将水果等商品洗净、切好，并装盒，按份出售。现开发一个“社区便利店收银系统”，店中每天提供固定种类的水果，装盒后，标记每一份价格，按份进行销售。在系统中，打开收银网页（casher.html），点击“+”添加销售水果，点击“结账”进行购买水果结算，点击“完成交易”进行下一个新用户购买。项目名称为casher，包含收银网页casher.html和js文件夹，其中，js文件夹包含jquery-3.3.1.min.js文件。收银网页分为三个区域：上端内容为“标题”和一个不可编

13、辑的“文本框”，“文本框”用来显示结账金额；中间内容为水果商品表格，在表格每一行中，点击一次“+”按钮，则添加一份，点击多次，则添加多份；下端内容为“结帐”和“完成交易”按钮。【效果图】（1）收银网页casher.html效果如图3-1所示。图3-1 初始化状态（2）在表格每一行中，点击水果名称后的“+”按钮，则将该水果的价格显示到上方的“文本框”中。若购买多份水果时，每份水果的价格之间使用“+”连接，如图3-2所示。图3-2 添加水果（3）点击“结帐”按钮，将“文本框”中价格进行计算，设置“文本框”显示内容为“总金额:xxx”；将“结帐”按钮设置为“禁用”；使用jQuery动画，将中间的表格

14、透明度设为“0.3”，动画持续时间为“1s”。如图3-3所示。图3-3 结帐（4）点击“交易完成”按钮，重新加载网页，恢复到网页的初始状态。【代码：收银网页casher.html】 社区便利店收银系统 body text-align:center; font-size:13px; table margin:10px auto; #result width:245px; height:40px; 社区便利店收银系统 名称 价格 添加 山东苹果 ￥13.5/份 新奇士橙 ￥12.5/份 麒麟瓜 ￥3.0/份 国产红提 ￥10.5/份 进口香蕉 ￥4.5/份     /

15、* 功能：使用Javascript编写代码，点击“+”按钮触发，修改“文本框”值为购买的水果价格，多次点击，以“+”连接各价格 参数：price 为添加水果的价格 返回：无 编写代码提示： （1）获得“文本框result”值 （2）判断“文本框result”值是否为”： （3）若为”，则将当前price赋值给“文本框” （4）若不为，则先在“文本框”已有值后添加一个“+”，再添加此次价格price */ function addClick(price) / 编写代码 /* 功能：使用Javascript编写代码，点击“结账”按钮触发，计算所购水果的总金额，并将结果显示在“文本框”result上

16、。 参数：无 返回：无 编写代码提示： （1）获得“文本框result”值 （2）使用“+”分隔出“文本框result”值中每一个价格，存放到Array对象中 （3）使用for循环遍历数组对象，将每个价格相加得到总金额 （4）设置“文本框result”值为“总金额:xxx” （5）调用disabledBtn()函数禁用“结帐”按钮 （6）调用transparency()函数设置水果商品表格的透明度 */ function checkoutClick() / 编写代码 /* 功能：使用jQuery库编写代码，将“结帐”按钮设为禁用 参数：无 返回：无 */ function disabledBt

17、n() / 编写代码 /* 功能：使用jQuery库编写代码，将水果商品表格透明度设为0.3，动画持续时间为1s 参数：无 返回：无 编写代码提示：使用jQuery的动画函数实现。 */ function transparency() / 编写代码 /* 功能：点击“交易完成”按钮触发，重新加载当前页面，初始页面状态 参数：无 返回：无 */ function reloadClick() / 编写代码 【问题1】（7分）使用JavaScript编写addClick()函数，并调试运行，满足功能要求。【问题2】（10分）使用JavaScript编写checkoutClick()函数，并调试运行，

18、满足功能要求。【问题3】（5分）使用jQuery编写disabledBtn()函数，并调试运行，满足功能要求。【问题4】（5分）使用jQuery编写transparency()函数，并调试运行，满足功能要求。【问题5】（3分）编写reloadClick()函数，并调试运行，满足功能要求。试题四（20分）阅读下列说明、效果图和HTML代码，进行移动端静态网站案例分析，回答问题1至问题3。【说明】某公司开发了一款移动端“智慧物业”网站，为业主和物业搭建便捷平台。对业主方而言，可以查阅相关社区基本信息、物业服务、在线缴费和报事报修等；对物业方而言，可以加强与物业之间的交流，收集业主的意见和建议，在线进行沟通和处理相关物业事宜等。现在我们需要设计和编写“智慧物业”网站中的“首页”和“报事报修”页面。项目名称为IComMobile，包括首页index.html、报事报修repair.html、img文件夹和font文件夹，其中，img文件夹包含页面所需图片资源，font文件夹包