《Web前端开发初级实操考试-1+X证书试点.docx》由会员分享，可在线阅读，更多相关《Web前端开发初级实操考试-1+X证书试点.docx（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、考生姓名 准考证号2019年下半年Web前端开发初级实操考试（考试时间14:00- 16:30共150分钟）1 .本试卷共5道题，满分100分。2 .请在指定位置或开发环境下作答。试题一 （22分）阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。 【说明】这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要 编写该网站效果图部分代码。项目名称为shopping,包含首页index.html css文件夹、img文件夹，其中，css文件 夹包含 index.css 文件；img 文件夹包含 img 1.jpg img2.jpg img3.j
2、pg、img4.jpg img5.jpg 图片。【效果图】图1-1【代码:首页index.html商品展示/title,!-根据上下文填入合适的标签(1)class= clear”,第1页共14页图4-1【代码 首页index.html 手风琴效果 要求 vspan要求要求要求要求要求要求要求要求要求要求要求要求要求要求要 求要求要求 信念 信念信念信念信念信念信念信念信念信念信念信念信念信念信念信 念信念信念信念信念信念信念信念 v/div 接受 vdiv接受接受接受接受接受接受接受接受接受接受接受接受接受接受接 受接受接受接受接受接受接受接受接受v/pv/divh2 现实 vspan现实现
3、实现实现实现实现实现实现实现实现实现实现实现实现实现 实现实现实现实现实现实现实现实现实现实现实现实现实现实现实v/p第10页共14页【代码index.jsl$(n.box ul li h2n).click(function(e)e. stopPropagation();被点击的h2的next的div下拉展开,其余的li内部的div上拉收起，时间8 00毫秒。$ (this). next(). stop()(D.parents(nlin).siblings().find(ndivn).stop().;$(this).parent().stop().addClass(,cur,).sibling
4、s().stop().removeClass(ncur,);)点击事件$(document). (3) (function。1所有div上拉收起，时间800毫秒。$(u.box ul li,).find(,divn). ：)【问题】(16分，每空4分)根据注释，补全代码，在(1)至(4)处填入正确的内容。试题五（16分）阅读下列说明、效果图和代码，进行静态网页开发，回答问题1至问题8o【说明】某互联网公司开发官网的首页，为了适配移动端，决定菜单采用底部固定形式。现在需 要编写代码实现效果。项目名称为menu,包含首页index.html css文件夹、js文件夹，其中，css文件夹包含 sty
5、le.css 文件；js 文件夹包含jquery.min.js 和 index.jso【效果图】第11页共14页中/%公告中除瓯首页服务资讯我的账户图5-1【代码 index.html title,底部菜单 首页v/a 项目 项目 v/div 服务 v/a 中心公告 中心资讯第12页共14页 资讯 我的账户【代码index.css】 a text-decoration: none; color: #333;) /*固定定位刃 Jay out-footer position:(1);z-index: 9999;/*左边距离Opx,底边距离Opx*/ left:：bottom:(3);/*实现fl
6、ex布局，主轴对齐方式是两端对齐，项目之间的间隔都相等。*/ display:；justify-content: Qj；width: 100%;height: 50px; border-top: Ipx solid gainsboro; color: black; text-align: center; background-color: #f2f2f2; )/*此处省略部分与本题无关的css*/【代码index.js$(n.bottom_nav an).click(function (e) e. stopPropagation ();/被点击a的上一个div元素样式设置为block,其余项目
7、的div的隐藏。$(this).prev().stop().(6).parent().siblings().children(n.layout-submenu).stop().CD；)$(document).click(function () 第13页共14页点击页面的任意地方，二级菜单全部取消$(.box ul li,).find(,divn). (8):)【问题】(16分，每空2分)根据注释，补全代码，在(1)至(8)处填入正确的内容。第14页共14页微胖连衣裙2019网红初秋女装v/p 黑色休闲裤韩版学生女装vp原创设计女装/(2) 【代码：CSS文件index.css body,hl,
8、h2,h3,h4,h5,h6,p,ul,ol,dl,dd margin: 0;padding:0;)/*清理默认li样式*/ul(3) :：/*显示为块级元素*/img： ：)/*清理左右浮动*/.clear:after content: display: block;).box第2页共14页width: 100%;).box .conwidth: 1375px;margin:0 auto;).box .con ulpadding-top: 30px;)/*左浮动*/.box .con ul li(9):(10);width: 250px;margin:0 22px 22px 0;border
9、: 1 px solid #eee;).box .con ul li imgmargin: 15px auto 0;).box .con ul li ppadding: 15px;)/*设置鼠标移入添加红色边框*/.box .con ul li:(11)border: 1 px solid red;)【问题】(22分，每空2分)进行静态网页开发，补全代码，在(1)至(11)处填入正确的内容。试题二(26分)阅读下列说明、效果图，进行静态网页开发，填写(1)至(13)代码。【说明】现接到思极商务有限公司官网页面开发的项目，根据业务需求，需要将业务列表页面的 每一个业务以卡片形式展示；同时为提升用
10、户体验，要求实现每个卡片在鼠标经过有旋转和 放大效果。项目名称为goods,包含首页index.html、css文件夹、img文件夹，其中，css文件夹包 含 style.css 文件；img 文件夹包含 icon-img.jpg icon-img2.jpg icon-img3.jpg 图片。请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。【效果图】(1)图2-1鼠标经过前第3页共14页(2)图2-2鼠标经过图2-2【代码：】M 二题 vp优化速度v/p 更多 营销分析第4页共14页 更多 !-根据上下文填写正确的标签v(3)SEO和导入链接v/p更多(/span 【代码】
11、/*注意：此处省略了部分和本题无关的CSS代码*/ .box .con ul lifloat:left;background-color: #fff;width: 380px;/*设置li边框为圆角15px,文字对齐方式为居中。*/：(5)；(6)(7) ；overflow: hidden;),box .con ul li:nth-child(2) margin:0 30px;).box .con ul li imgmargin:5Opx auto 0;/*此处设置图片的过渡效果为0.8秒*/： 0.8s;).box .con ul li p/*设置内边距上下为0,左右为15px*/(9)：(
12、10)；line-height: 140px;border-bottom: 1 px solid #ddd;font-weight: 600;color:#555;).box .con ul li spandisplay: block;第5页共14页width: 100%;height:60px;line-height: 60px;/*此处设置文字的过渡效果为0.8秒*/： 0.8s;）/*用CSS3的实现鼠标经过图片旋转360度，放大1.3倍，离开再旋转还原。*/ .box .con ul li:hover img: （ID;）.box .con ul li:hover spanbackgr
13、ound-color: #f7c324;font-weight: 600;）【问题】（26分，每空2分）进行静态网页开发，补全代码，在（1）至（13）处填入正确的内容。试题三（20分）阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（10）代码。【说明】现接到某电商网站注册、登录页面开发的项目，在注册页面需要做前端验证。具体要求： 用户名长度和格式验证、邮箱格式验证、密码长度和格式验证、密码与重复密码一致性验证。项目名称为verify,包含首页index.htmk css文件夹、js文件夹，其中，css文件夹包 含style.css文件，js文件夹包含index.js文件。【效果图】
14、用户名： 亨总军长发为63含数字和字殍* 电子邮箱：喻入正喇）电空码：笈否定招* 确”密码：循认乎口必行与三社一政岸交图3-1第6页共14页【代码：index.html】登录 v/titlevh2 注册 *ffl 户名：input type=ntextn name=username1 placeholder=”只能输入 6-20 个 字母、数字、下划线” id=username”*v/span 电子邮箱：vspan*v/span密码： * v/span 确认密码：button name=submit”,提交/button【代码：indexjs】自定义验证用户名的方法function valid
15、ate_strLenght(str) 第7页共14页var regExp = /A(w)6,20$/; return regExp.test(str);)自定义的验证email方法 function validate_email(str) var regExp = /八w+(-+.w+)*w+(.w+)*.w+(-.w+)*$/; return regExp.test(str);)自定义验证密码的方法 function validate_pwd(str) var regExp = /A a- zA-Z w 5,15 /; return regExp.test(str);)根据表单控件user的
16、id填写var username = document.getElementById(uQJ)；/通过id获取元素var email = document.(email); 根据表单控件pwd的id填写var pwd = document.getElementById(u”)； 通过id获取元素var pwdOK = document.(4)(HpwdOKn);通过标签名获取元素var form = document.(5)(nform,)0; 表单提交 form. = function () 使用自定义方法验证用户名、验证邮箱if (validate_strLenght(7) &(8(ema
17、il.value)& validate_pwd(pwd.value) & checkOk() console. log(username. value) console.log(email. value) console.log(pwd. value) return false; else 控制台输出(9)验证失败)return false; ) ) /检查用户名 username, onblur = function () if (validate_strLenght(username, value) console, log(用户名符合要求”) else console Jog(用户名不符
18、合要求”)第8页共14页检查meilemail.onblur = function () if (validate_email(email. value) console. log(邮箱格式符合要求”) else console. log(邮箱格式不符合要求”)/密码框失去焦点的时候pwd. (10)= function () if (validate_pwd(pwd. value) console, log(密码符合要求”) else console, log(密码不符合要求”)function checkOk() if (pwd.value = pwdOK.value) console J
19、og(密码与重复密码一致) return true else console Jog(密码与重复密码不一致) return false)pwdOK. onkey up = checkOk【问题】（20分，每空2分）根据注释，补全代码，在（1）至（10）处填入正确的内容。试题四（16分）阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4o【说明】某公司要制作自己的官网首页，经过研究，侧边栏采用手风琴菜单效果。现在我们需要 编写该网站效果图部分的代码。项目名称为accordion,包含首页index.html css文件夹、js文件夹，其中，css文件夹 包含 style.css 文件；js 文件夹包含jquery.min.js 和 index.jso【效果图】第9页共14页