Web前端開(kāi)發(fā)初級(jí)實(shí)操考試+證書(shū)試點(diǎn)_第1頁(yè)
Web前端開(kāi)發(fā)初級(jí)實(shí)操考試+證書(shū)試點(diǎn)_第2頁(yè)
Web前端開(kāi)發(fā)初級(jí)實(shí)操考試+證書(shū)試點(diǎn)_第3頁(yè)
Web前端開(kāi)發(fā)初級(jí)實(shí)操考試+證書(shū)試點(diǎn)_第4頁(yè)
Web前端開(kāi)發(fā)初級(jí)實(shí)操考試+證書(shū)試點(diǎn)_第5頁(yè)
已閱讀5頁(yè)，還剩9頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

考生姓名 準(zhǔn)考證號(hào)2019年下半年 Web前端開(kāi)發(fā)初級(jí) 實(shí)操考試〔14:00-16:30150分鐘〕5100分。請(qǐng)?jiān)谥付ㄎ恢没蜷_(kāi)發(fā)環(huán)境下作答。試題一〔22分〕HTML代碼，進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，填寫(xiě)〔1〕至〔11〕代碼?！菊f(shuō)明】編寫(xiě)該網(wǎng)站效果圖局部代碼。shoppingindex.html、css文件夾、img文件夾，其中，css文件index.css文件；imgimg1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg圖片?！拘Ч麍D】1-1index.html】<!DOCTYPEhtml><html><head><title>商品展現(xiàn)</title><metacharset=“utf-8“><linkrel=“stylesheet“type=“text/css“href=“css/index.css“/></head><body><divclass=“box“><divclass=“con“><!--依據(jù)上下文填入適宜的標(biāo)簽-->< 〔1〕 class=“clear“><li><imgsrc=“img/img1.jpg“>114頁(yè)1014頁(yè)<p><p>微胖連衣裙</p></li><li><imgsrc=“img/img2.jpg“><p>2019網(wǎng)紅初秋女裝</p></li><li><imgsrc=“img/img3.jpg“><p>黑色休閑褲</p></li><li><imgsrc=“img/img4.jpg“><p>韓版學(xué)生女裝</p></li><li><imgsrc=“img/img5.jpg“><p>原創(chuàng)設(shè)計(jì)女裝</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〕;}/*顯示為塊級(jí)元素*/img{(5) : (6) ;}/*清理左右浮動(dòng)*/.clear:after{content:““;display:block;〔7〕: 〔8〕;}.box{width:width:100%;}.box.con{width:1375px;margin:0auto;}.box.conul{padding-top:30px;}/*左浮動(dòng)*/.box.conulli{〔9〕: 〔10〕;width:250px;margin:022px22px0;border:1pxsolid#eee;}.box.conulliimg{margin:15pxauto0;}.box.conullip{padding:15px;}/*設(shè)置鼠標(biāo)移入添加紅色邊框*/.box.conul li: 〔11〕 {border:1pxsolidred;}【問(wèn)題】〔222分〕進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，補(bǔ)全代碼，在〔1〕至〔11〕處填入正確的內(nèi)容。試題二〔26分〕閱讀以下說(shuō)明、效果圖，進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，填寫(xiě)〔1〕至〔13〕代碼?！菊f(shuō)明】放大效果。工程名稱為goods，包含首頁(yè)index.html、css文件夾、img文件夾，其中，css文件夾包style.css文件；imgicon-img.jpg、icon-img2.jpg、icon-img3.jpg圖片。請(qǐng)使用html+css3完成以下效果，并在對(duì)應(yīng)代碼處將空缺代碼補(bǔ)全?！拘Ч麍D】2-1鼠標(biāo)經(jīng)過(guò)前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>優(yōu)化速度</p><span>更多</span></li><li><imgsrc=“img/icon-img2.jpg“><p>營(yíng)銷分析</p><span><span>更多</span></li><li><!--依據(jù)上下文填寫(xiě)正確的標(biāo)簽-->< 〔2〕 src=“img/icon-img3.jpg“>< 〔3〕 >SEO和導(dǎo)入鏈接</p><span>更多</span></li></ul></div></div></body></html>【代碼】/*/*css代碼*/.box.conulli{float:left;background-color:#fff;width:380px;/*li15px，文字對(duì)齊方式為居中。*/〔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;}【問(wèn)題】〔262分〕進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，補(bǔ)全代碼，在〔1〕至〔13〕處填入正確的內(nèi)容。試題三〔20分〕閱讀以下說(shuō)明、效果圖和代碼，進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，填寫(xiě)〔1〕至〔10〕代碼。【說(shuō)明】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>注冊(cè)</h2><formaction=““method=“post“><ul><li>

<label><span>*</span>用戶名：</label><inputtype=“text“name=“username“placeholder=“6-20個(gè)字母、數(shù)字、下劃線“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=“由字母開(kāi)頭,包含字母、數(shù)字、下劃線,6-16位“id=“pwd“></li><li><label><span>*</span>確認(rèn)密碼：</label><inputtype=“password“name=“pwdOk“placeholder=“確認(rèn)密碼必需與密碼全都“id=“pwdOK“></li></ul><buttonname=“submit“>提交</button></form></div><scriptsrc=“js/index.js“></script></body></html>【代碼：index.js】////自定義驗(yàn)證用戶名的方法functionvalidate_strLenght(str){varregExp=/^(\w){6,20}$/;returnregExp.test(str);}//email方法functionvalidate_email(str){varregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;returnregExp.test(str);}//自定義驗(yàn)證密碼的方法functionvalidate_pwd(str){varregExp=/^[a-zA-Z]\w{5,15}/;returnregExp.test(str);}//userid填寫(xiě)varusername=document.getElementById(“ 〔1〕 “);//id獵取元素varemail=document. 〔2〕 (“email“);//pwdid填寫(xiě)varpwd=document.getElementById(“ 〔3〕 “);//id獵取元素varpwdOK=document.//通過(guò)標(biāo)簽名獵取元素〔4〕(“pwdOK“);varform=document.//表單提交〔5〕(“form“)[0];form. 〔6〕=function{//使用自定義方法驗(yàn)證用戶名、驗(yàn)證郵箱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{//掌握臺(tái)輸出〔9〕 .log(“驗(yàn)證失敗“)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(“郵箱格式不符合要求“)}}//密碼框失去焦點(diǎn)的時(shí)候pwd. 〔10〕 =function{if(validate_pwd(pwd.value)){console.log(“密碼符合要求“)}else{console.log(“密碼不符合要求“)}}functioncheckOk{if(pwd.value==pwdOK.value){console.log(“密碼與重復(fù)密碼全都“)returntrue}else{console.log(“密碼與重復(fù)密碼不全都“)returnfalse}}pwdOK.onkeyup=checkOk【問(wèn)題】〔202分〕依據(jù)注釋，補(bǔ)全代碼，在〔1〕至〔10〕處填入正確的內(nèi)容。試題四〔16分〕閱讀以下說(shuō)明、效果圖和代碼，進(jìn)展動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，答復(fù)以下問(wèn)題1至問(wèn)題4。【說(shuō)明】編寫(xiě)該網(wǎng)站效果圖局部的代碼。accordionindex.html、css文件夾、js文件夾，其中，css文件夾style.css文件；jsjquery.min.jsindex.js?！拘Ч麍D】4-1index.html】<!DOCTYPEhtml><html><head><title>手風(fēng)琴效果</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>現(xiàn)實(shí)<span></span></h2><div><p>現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)現(xiàn)實(shí)</p></div></li></li></ul></div><scriptsrc=“js/index.js“></script></body></html>$(“.boxul$(“.boxullih2“).click(function(e){e.stopPropagation;//h2nextdiv下拉開(kāi)放，其余的lidiv上拉收起，時(shí)間800毫秒。$(this).next.stop..stop.(1).parents(“l(fā)i“).siblings.find(“div“)(2);$(this).parent.stop.addClass(“cur“).siblings.stop.removeClass(“cur“);})//點(diǎn)擊大事$(document). (3) (function{//div800毫秒。$(“.boxulli“).find(“div“). (4) ;})【問(wèn)題】〔164分〕依據(jù)注釋，補(bǔ)全代碼，在〔1〕至〔4〕處填入正確的內(nèi)容。試題五〔16分〕閱讀以下說(shuō)明、效果圖和代碼，進(jìn)展靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，答復(fù)以下問(wèn)題1至問(wèn)題8?！菊f(shuō)明】要編寫(xiě)代碼實(shí)現(xiàn)效果。menu，包含首頁(yè)index.html、css文件夾、js文件夾，其中，css文件夾包含style.css文件；jsjquery.min.jsindex.js?！拘Ч麍D】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=“l(fā)ayout-footer“><divclass=“bottom_nav“><ahref=““>首頁(yè)</a></div><divclass=“bottom_nav“><divclass=“l(fā)ayout-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=“l(fā)ayout-submenu“><divclass=“sub_menu“style=“border-bottom:1.5pxsolid#F2F2F2“><a>中心公告</a></div><divclass=“sub_menu“>中

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論