Web前端开发初级实操考试+证书试点_第1页
Web前端开发初级实操考试+证书试点_第2页
Web前端开发初级实操考试+证书试点_第3页
Web前端开发初级实操考试+证书试点_第4页
Web前端开发初级实操考试+证书试点_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

考生姓名 准考证号2019年下半年 Web前端开发初级 实操考试〔14:00-16:30150分钟〕5100分。请在指定位置或开发环境下作答。试题一〔22分〕HTML代码，进展静态网页开发，填写〔1〕至〔11〕代码。【说明】编写该网站效果图局部代码。shoppingindex.html、css文件夹、img文件夹，其中，css文件index.css文件；imgimg1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg图片。【效果图】1-1index.html】<!DOCTYPEhtml><html><head><title>商品展现</title><metacharset=“utf-8“><linkrel=“stylesheet“type=“text/css“href=“css/index.css“/></head><body><divclass=“box“><divclass=“con“><!--依据上下文填入适宜的标签-->< 〔1〕 class=“clear“><li><imgsrc=“img/img1.jpg“>114页1014页<p><p>微胖连衣裙</p></li><li><imgsrc=“img/img2.jpg“><p>2019网红初秋女装</p></li><li><imgsrc=“img/img3.jpg“><p>黑色休闲裤</p></li><li><imgsrc=“img/img4.jpg“><p>韩版学生女装</p></li><li><imgsrc=“img/img5.jpg“><p>原创设计女装</p></</div></div></body></html></li>〔2〕>body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{margin:0;padding:0;}body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{margin:0;padding:0;}/*li样式*/ul{〔3〕:〔4〕;}/*显示为块级元素*/img{(5) : (6) ;}/*清理左右浮动*/.clear:after{content:““;display:block;〔7〕: 〔8〕;}.box{width:width:100%;}.box.con{width:1375px;margin:0auto;}.box.conul{padding-top:30px;}/*左浮动*/.box.conulli{〔9〕: 〔10〕;width:250px;margin:022px22px0;border:1pxsolid#eee;}.box.conulliimg{margin:15pxauto0;}.box.conullip{padding:15px;}/*设置鼠标移入添加红色边框*/.box.conul li: 〔11〕 {border:1pxsolidred;}【问题】〔222分〕进展静态网页开发，补全代码，在〔1〕至〔11〕处填入正确的内容。试题二〔26分〕阅读以下说明、效果图，进展静态网页开发，填写〔1〕至〔13〕代码。【说明】放大效果。工程名称为goods，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包style.css文件；imgicon-img.jpg、icon-img2.jpg、icon-img3.jpg图片。请使用html+css3完成以下效果，并在对应代码处将空缺代码补全。【效果图】2-1鼠标经过前2-12-22-2-2<!DOCTYPE<!DOCTYPEhtml><html><head><title>其次题</title><metacharset=“utf-8“><!--cssstyle.css--><linkrel=“stylesheet“type=“text/css“</head><body><divclass=“box“><divclass=“con“><ulclass=“clear“><li>href=“〔1〕“><imgsrc=“img/icon-img.jpg“><p>优化速度</p><span>更多</span></li><li><imgsrc=“img/icon-img2.jpg“><p>营销分析</p><span><span>更多</span></li><li><!--依据上下文填写正确的标签-->< 〔2〕 src=“img/icon-img3.jpg“>< 〔3〕 >SEO和导入链接</p><span>更多</span></li></ul></div></div></body></html>【代码】/*/*css代码*/.box.conulli{float:left;background-color:#fff;width:380px;/*li15px，文字对齐方式为居中。*/〔4〕 ：〔6〕 ：〔5〕〔7〕;;overflow:hidden;}.box.conulli:nth-child(2){margin:030px;}.box.conulliimg{margin:50pxauto0;/*0.8秒*/〔8〕 ：0.8s;}.box.conullip{/*015px*/〔9〕 ：〔10〕 line-height:140px;border-bottom:1pxsolid#ddd;font-weight:600;color:#555;}.box.conullispan{display:block;width:width:100%;height:60px;line-height:60px;/*0.8秒*/〔11〕 ：0.8s;}.box.conulli:hoverimg{〔12〕 ： 〔13〕 ;}.box.conulli:hoverspan{background-color:#f7c324;font-weight:600;}【问题】〔262分〕进展静态网页开发，补全代码，在〔1〕至〔13〕处填入正确的内容。试题三〔20分〕阅读以下说明、效果图和代码，进展静态网页开发，填写〔1〕至〔10〕代码。【说明】verifyindex.html、css文件夹、js文件夹，其中，css文件夹包style.css文件，jsindex.js文件。【效果图】3-1【代码：index.html】<!DOCTYPEhtml><html><head><title>登录</title><metacharset=“utf-8“><linkrel=“stylesheet“type=“text/css“href=“css/style.css“></head><body><divclass=“box“id=“box“><h2>注册</h2><formaction=““method=“post“><ul><li>

<label><span>*</span>用户名：</label><inputtype=“text“name=“username“placeholder=“6-20个字母、数字、下划线“id=“username“></li><li>地址“id=“email“>

</li><li>

<label><span>*</span>电子邮箱：</label><inputtype=“text“name=“email“placeholder=“输入正确的电子邮箱<label><span>*</span>密码：</label><inputtype=“password“name=“pwd“placeholder=“由字母开头,包含字母、数字、下划线,6-16位“id=“pwd“></li><li><label><span>*</span>确认密码：</label><inputtype=“password“name=“pwdOk“placeholder=“确认密码必需与密码全都“id=“pwdOK“></li></ul><buttonname=“submit“>提交</button></form></div><scriptsrc=“js/index.js“></script></body></html>【代码：index.js】////自定义验证用户名的方法functionvalidate_strLenght(str){varregExp=/^(\w){6,20}$/;returnregExp.test(str);}//email方法functionvalidate_email(str){varregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;returnregExp.test(str);}//自定义验证密码的方法functionvalidate_pwd(str){varregExp=/^[a-zA-Z]\w{5,15}/;returnregExp.test(str);}//userid填写varusername=document.getElementById(“ 〔1〕 “);//id猎取元素varemail=document. 〔2〕 (“email“);//pwdid填写varpwd=document.getElementById(“ 〔3〕 “);//id猎取元素varpwdOK=document.//通过标签名猎取元素〔4〕(“pwdOK“);varform=document.//表单提交〔5〕(“form“)[0];form. 〔6〕=function{//使用自定义方法验证用户名、验证邮箱if(validate_strLenght( 〔7〕 )&& 〔8〕 (email.value)&&validate_pwd(pwd.value)&&checkOk){console.log(username.value)console.log(email.value)console.log(pwd.value)returnfalse;}else{//掌握台输出〔9〕 .log(“验证失败“)returnfalse;}}//检查用户名username.onblur=function{if(validate_strLenght(username.value)){console.log(“用户名符合要求“)}else{console.log(“用户名不符合要求“)}}}email.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(“密码不符合要求“)}}functioncheckOk{if(pwd.value==pwdOK.value){console.log(“密码与重复密码全都“)returntrue}else{console.log(“密码与重复密码不全都“)returnfalse}}pwdOK.onkeyup=checkOk【问题】〔202分〕依据注释，补全代码，在〔1〕至〔10〕处填入正确的内容。试题四〔16分〕阅读以下说明、效果图和代码，进展动态网页开发，答复以下问题1至问题4。【说明】编写该网站效果图局部的代码。accordionindex.html、css文件夹、js文件夹，其中，css文件夹style.css文件；jsjquery.min.jsindex.js。【效果图】4-1index.html】<!DOCTYPEhtml><html><head><title>手风琴效果</title><metacharset=“utf-8“><linkrel=“stylesheet“type=“text/css“href=“css/style.css“><scriptsrc=“js/jquery.min.js“></script></head><body><divclass=“box“><ul><li>

<h2>要求<span></span></h2><div><p>要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求</p></div></li><li><h2>信念<span></span></h2><div><p>信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念</p></div></li><li><h2>承受<span></span></h2><div><p>承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受承受</p></div></li><li><h2>现实<span></span></h2><div><p>现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实现实</p></div></li></li></ul></div><scriptsrc=“js/index.js“></script></body></html>$(“.boxul$(“.boxullih2“).click(function(e){e.stopPropagation;//h2nextdiv下拉开放，其余的lidiv上拉收起，时间800毫秒。$(this).next.stop..stop.(1).parents(“li“).siblings.find(“div“)(2);$(this).parent.stop.addClass(“cur“).siblings.stop.removeClass(“cur“);})//点击大事$(document). (3) (function{//div800毫秒。$(“.boxulli“).find(“div“). (4) ;})【问题】〔164分〕依据注释，补全代码，在〔1〕至〔4〕处填入正确的内容。试题五〔16分〕阅读以下说明、效果图和代码，进展静态网页开发，答复以下问题1至问题8。【说明】要编写代码实现效果。menu，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件；jsjquery.min.jsindex.js。【效果图】5-1<!DOCTYPEhtml><html><!DOCTYPEhtml><html><head><title>底部菜单</title><metacharset=“utf-8“><metaname=“viewport“content=“width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no“><linkrel=“stylesheet“href=“css/style.css“><scriptsrc=“js/jquery.min.js“></script></head><body><divclass=“layout-footer“><divclass=“bottom_nav“><ahref=““>首页</a></div><divclass=“bottom_nav“><divclass=“layout-submenu“><divclass=“sub_menu“style=“border-bottom:1.5pxsolid#F2F2F2“><a>工程</a></div><divclass=“sub_menu“>工程</div></div><a>效劳</a></div><divclass=“bottom_nav“><divclass=“layout-submenu“><divclass=“sub_menu“style=“border-bottom:1.5pxsolid#F2F2F2“><a>中心公告</a></div><divclass=“sub_menu“>中

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论