Web前端开发-职业技能考试-初级-Web前端开发初级实操考试_V1.0

2023年7月9日发(作者：)

考生姓名准考证号

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

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

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

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

试题一（20分）

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

【说明】

在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本项目为“搜索引擎”网站。

项目名称为Search，包括搜索主页面、第一个标签页、第二个标签页和img文件夹，其中，img文件夹包括图片。

页面布局和内容为：

（1）为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索结果。其中，搜索结果使用iframe标签定义，显示或。

（2）为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用2个table进行布局。

（3）为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列表，第二部分是分页页码。其中，使用1个table进行布局。

选择不同的类别标签，会显示该类别下的搜索结果。

【效果图】

（1）打开效果如图1所示。

图1-1

第 1 页共 17 页（2）点击“标签页2-资讯”，搜索结果显示为，效果如图2所示。

图1-2

【代码：搜索主页】

搜索

标签页1-网页

标签页2-资讯

<p> frameborder="0" >

第 2 页共 17 页

【代码：第一个标签页】

搜索

（8）

超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接等...

HTML Standard

1.2 Is this HTML5?This section is short:

more length: the term "HTML5" is widely used as a buzzword to refer ...

1 2 3 4

第 3 页共 17 页【代码：第二个标签页】

搜索

实现实时Html编辑器

给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...

html中q标签(短的引用)的详细介绍

本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下! 学习html其实就是学习标签的用法,今天小编要介绍的是...

1 2 3 4

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

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

试题二（30分）

阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写（1）至（15）代码。

【说明】

这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、JavaScript和jQuery，现在我们需要编写该网站首页样式。

项目名称为web_skill，包含首页、css文件夹和img文件夹，其中，css文件夹包含文件，img文件夹包含、、和图片。

首页（）内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示四项【技术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。

对页面样式进行设计，要求为：

（1）页面全局样式：设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，

第 4 页共 17 页字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动画持续时间为“1s”，动画次数为“1”次。

（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。

（3）【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；为【技术特点】中列表设置文本内容“居左”。

【效果图】

图2-1

【代码：首页】

"/TR/html4/">

Web技术社区

第 5 页共 17 页

欢迎来到XX网

本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。

本站致力于推广各种前端技术，所有资源...

HTML 指的是超文本标记语言

/* ...省略其它li，参见【效果图】内容 */

CSS 指层叠样式表

/* ...省略其它li，参见【效果图】内容 */

JavaScript 是一种轻量级的编程语言

/* ...省略其它li，参见【效果图】内容 */

jQuery是一个JavaScript函数库

/* ...省略其它li，参见【效果图】内容 */

第 6 页共 17 页

【代码：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）;/* 字体颜色 */

}

#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%;

第 7 页共 17 页 }

（14） {/* 列表样式，以class加子元素选择器的方式填写 */

（15）;

}

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

开发网页动态页面样式，补全代码，在（1）至（15）处填入正确的内容。

试题三（30分）

阅读下列说明、效果图和HTML代码，进行网页编程，回答问题1至问题5。

【说明】

随着个性化服务发展，学校、街边、社区等都流行将水果等商品洗净、切好，并装盒，按份出售。现开发一个“社区便利店收银系统”，店中每天提供固定种类的水果，装盒后，标记每一份价格，按份进行销售。在系统中，打开收银网页（），点击“+”添加销售水果，点击“结账”进行购买水果结算，点击“完成交易”进行下一个新用户购买。

项目名称为casher，包含收银网页和js文件夹，其中，js文件夹包含文件。

收银网页分为三个区域：上端内容为“标题”和一个不可编辑的“文本框”，“文本框”用来显示结账金额；中间内容为水果商品表格，在表格每一行中，点击一次“+”按钮，则添加一份，点击多次，则添加多份；下端内容为“结帐”和“完成交易”按钮。

【效果图】

（1）收银网页效果如图3-1所示。

图3-1 初始化状态

（2）在表格每一行中，点击水果名称后的“+”按钮，则将该水果的价格显示到上方的“文本框”中。若购买多份水果时，每份水果的价格之间使用“+”连接，如图3-2所示。

第 8 页共 17 页图3-2 添加水果

（3）点击“结帐”按钮，将“文本框”中价格进行计算，设置“文本框”显示内容为“总金额:xxx”；将“结帐”按钮设置为“禁用”；使用jQuery动画，将中间的表格透明度设为“0.3”，动画持续时间为“1s”。如图3-3所示。

图3-3 结帐

（4）点击“交易完成”按钮，重新加载网页，恢复到网页的初始状态。

【代码：收银网页】

第 9 页共 17 页

社区便利店收银系统

第 10 页共 17 页

名称	价格	添加
山东苹果	￥13.5/份
新奇士橙	￥12.5/份
麒麟瓜	￥3.0/份
国产红提	￥10.5/份
进口香蕉	￥4.5/份

onclick="checkoutClick()" />

【问题1】（7分）

使用JavaScript编写addClick()函数，并调试运行，满足功能要求。

【问题2】（10分）

使用JavaScript编写checkoutClick()函数，并调试运行，满足功能要求。

【问题3】（5分）

使用jQuery编写disabledBtn()函数，并调试运行，满足功能要求。

【问题4】（5分）

使用jQuery编写transparency()函数，并调试运行，满足功能要求。

【问题5】（3分）

编写reloadClick()函数，并调试运行，满足功能要求。

试题四（20分）

阅读下列说明、效果图和HTML代码，进行移动端静态网站案例分析，回答问题1至问题3。

【说明】

某公司开发了一款移动端“智慧物业”网站，为业主和物业搭建便捷平台。对业主方而

第 12 页共 17 页言，可以查阅相关社区基本信息、物业服务、在线缴费和报事报修等；对物业方而言，可以加强与物业之间的交流，收集业主的意见和建议，在线进行沟通和处理相关物业事宜等。

现在我们需要设计和编写“智慧物业”网站中的“首页”和“报事报修”页面。

项目名称为IComMobile，包括首页、报事报修、img文件夹和font文件夹，其中，img文件夹包含页面所需图片资源，font文件夹包含自定义字体。

（1）首页（）：内容分为四个部分，一是【标题栏】，位于页面上端，内容为社区名称，以文字的形式展示；二是【轮播图】，位于【标题栏】下方，内容为主题图片，以图片展示；三是【功能列表】，位于【轮播图】下方，内容包括社区中心、报事报修、物管窗口、物业交费四个功能，以图片按钮的形式展示；四是【底部导航栏】，位于页面最下端，内容为导航按钮，每个导航按钮以图标和文字展示。

（2）报事报修页面（）：内容为一个表单，内容包含“地址”、“联系人”、“联系电话”、“预约时间”、“报修详情”五个表单项，每一项必填，以及“保存”按钮和“放弃”按钮，业主在首页上点击“报事报修”进入该页面，填写相关表单信息，点击“保存”按钮提交表单，点击“放弃”按钮则放弃提交当前表单内容。

【效果图】

首页效果如图4-1，事报修效果如图4-2，在首页点击“报事报修”进入图4-2页面。

图4-1 图4-2

【代码：首页】

第 13 页共 17 页

首页

美好生活小区

物业公告：感恩回馈预存有礼

第 14 页共 17 页