Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx
- 文档编号:2838689
- 上传时间:2022-11-15
- 格式:DOCX
- 页数:24
- 大小:196.48KB
Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx
《Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx》由会员分享,可在线阅读,更多相关《Web前端开发职业技能考试初级Web前端开发初级实操考试V10.docx(24页珍藏版)》请在冰豆网上搜索。
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文件夹,其中,img文件夹包括图片logo.png。
页面布局和内容为:
(1)index.html为搜索主页,分为三部分,自上而下依次是:
搜索框、分类标签和搜索结果。
其中,搜索结果使用iframe标签定义,显示tab1.html或tab2.html。
(2)tab1.html为搜索结果页,是“标签页1-网页”的搜索结果,第一部分是搜索结果列表,第二部分是分页页码。
其中,使用2个table进行布局。
(3)tab2.html为搜索结果页,是“标签页2-资讯”的搜索结果,第一部分是搜索结果列表,第二部分是分页页码。
其中,使用1个table进行布局。
选择不同的类别标签,会显示该类别下的搜索结果。
【效果图】
(1)打开index.html效果如图1所示。
图1-1
(2)点击“标签页2-资讯”,搜索结果显示为tab2.html,效果如图2所示。
图1-2
【代码:
搜索主页index.html】
(1)html>
--文档声明-->
(2)="utf-8"> --文档字符编码为utf-8-->S --设置文档标题为“搜索”--> .search_val{width: 400px;margin-bottom: 20px;}/*设置搜索框为400px,底部外边距为20px*/ a{margin-right: 20px}/*设置a链接的右边距为20px*/
--tab1.html显示在iframe中-->
frameborder="0"> 【代码: 第一个标签页tab1.html】 DOCTYPEhtml>
body{font-size:
13px;}/*设置页面字体大小为13px*/
p{width:
380px;}/*设置p元素的宽度为380px*/
p,h3{margin:
0;padding:
0;}/*设置内边距和外边距均为0*/
.noPic{width:
460px;}/*设置类名为noPic的元素的宽度为460px*/
img{padding:
10px;}/*设置图片的内边距为10px*/
--设置无边框表格--> --合并两列--> (8) --设置标题“HTML”为三号标题--> --插入img文件夹下的logo.png图片--> 超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接等... //HTML.com
HTMLStandard
Thissectionisnon-normative.Inshort:
Yes.Inmorelength:
theterm"HTML5"iswidelyusedasabuzzwordtorefer...
//HTMLS
【代码:
第二个标签页tab2.html】
DOCTYPEhtml>
body{font-size:
13px;}/*设置页面字体大小为13px*/
td{padding:
10px;}/*设置td单元格的内边距为10px*/
p{width:
450px;}/*设置p元素的宽度为450px*/
p,h3{(10)}/*设置内边距和外边距均为0*/
实现实时Html编辑器
给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...
//HTML.com
html中q标签(短的引用)的详细介绍
本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下!
学习html其实就是学习标签的用法,今天小编要介绍的是...
//HTMLS
【问题】(20分,每空2分)
进行静态网页开发,补全代码,在
(1)至(10)处填入正确的内容。
试题二(30分)
阅读下列说明、效果图、HTML代码和CSS代码,开发网页动态页面样式,填写
(1)至(15)代码。
【说明】
这是“Web技术社区”网站,该网站致力于推广和分享各种前端技术,如HTML、CSS、JavaScript和jQuery,现在我们需要编写该网站首页样式。
项目名称为web_skill,包含首页index.html、css文件夹和img文件夹,其中,css文件夹包含index.css文件,img文件夹包含html.png、css.png、js.png和jquery.png图片。
首页(index.html)内容分为两部分,一是【网站介绍】,位于页面上端,内容为【欢迎语】和【网站内容介绍】,以文字的形式展示;二是【技术介绍】,位于页面下端,展示四项【技术】,每项都包括【技术logo】和【技术特点】,以图片和列表的形式展示。
对页面样式进行设计,要求为:
(1)页面全局样式:
设置页面全局属性,页面外边距和内边距为“0”,字体为“宋体”,字体大小为“35px”。
为页面设置透明度动画,在页面加载时执行,透明度从“0”到“1”,动画持续时间为“1s”,动画次数为“1”次。
(2)【网站介绍】样式:
为页面上端【网站介绍】部分添加背景颜色“#000000”,并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。
另外,为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
(3)【技术介绍】样式:
为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。
另外,为【技术】设置宽度为“17%”、外边距为“4%”;为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”;为【技术特点】中列表设置文本内容“居左”。
【效果图】
图2-1
【代码:
首页index.html】
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
(1)"/>
欢迎来到XX网
本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。
本站致力于推广各种前端技术,所有资源...
(2)"> --第一张图片和列表-->
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 前端 开发 职业技能 考试 初级 V10
![提示](https://static.bdocx.com/images/bang_tan.gif)