Web前端開發(fā)初級實操考試+證書試點_第1頁
Web前端開發(fā)初級實操考試+證書試點_第2頁
Web前端開發(fā)初級實操考試+證書試點_第3頁
Web前端開發(fā)初級實操考試+證書試點_第4頁
Web前端開發(fā)初級實操考試+證書試點_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

考生姓名 準考證號2019年下半年 Web前端開發(fā)初級 實操考試〔14:00-16:30150分鐘〕5100分。請在指定位置或開發(fā)環(huán)境下作答。試題一〔22分〕HTML代碼，進展靜態(tài)網(wǎng)頁開發(fā)，填寫〔1〕至〔11〕代碼?！菊f明】編寫該網(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ù)上下文填入適宜的標簽-->< 〔1〕 class=“clear“><li><imgsrc=“img/img1.jpg“>114頁1014頁<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è)計女裝</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;}/*設(shè)置鼠標移入添加紅色邊框*/.box.conul li: 〔11〕 {border:1pxsolidred;}【問題】〔222分〕進展靜態(tài)網(wǎng)頁開發(fā)，補全代碼，在〔1〕至〔11〕處填入正確的內(nèi)容。試題二〔26分〕閱讀以下說明、效果圖，進展靜態(tài)網(wǎng)頁開發(fā)，填寫〔1〕至〔13〕代碼?！菊f明】放大效果。工程名稱為goods，包含首頁index.html、css文件夾、img文件夾，其中，css文件夾包style.css文件；imgicon-img.jpg、icon-img2.jpg、icon-img3.jpg圖片。請使用html+css3完成以下效果，并在對應(yīng)代碼處將空缺代碼補全。【效果圖】2-1鼠標經(jīng)過前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>營銷分析</p><span><span>更多</span></li><li><!--依據(jù)上下文填寫正確的標簽-->< 〔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，文字對齊方式為居中。*/〔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分〕進展靜態(tài)網(wǎng)頁開發(fā)，補全代碼，在〔1〕至〔13〕處填入正確的內(nèi)容。試題三〔20分〕閱讀以下說明、效果圖和代碼，進展靜態(tài)網(wǎng)頁開發(fā)，填寫〔1〕至〔10〕代碼?！菊f明】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個字母、數(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=“由字母開頭,包含字母、數(shù)字、下劃線,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(“密碼與重復(fù)密碼全都“)returntrue}else{console.log(“密碼與重復(fù)密碼不全都“)returnfalse}}pwdOK.onkeyup=checkOk【問題】〔202分〕依據(jù)注釋，補全代碼，在〔1〕至〔10〕處填入正確的內(nèi)容。試題四〔16分〕閱讀以下說明、效果圖和代碼，進展動態(tài)網(wǎng)頁開發(fā)，答復(fù)以下問題1至問題4?！菊f明】編寫該網(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)實<span></span></h2><div><p>現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實現(xiàn)實</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(“l(fā)i“).siblings.find(“div“)(2);$(this).parent.stop.addClass(“cur“).siblings.stop.removeClass(“cur“);})//點擊大事$(document). (3) (function{//div800毫秒。$(“.boxulli“).find(“div“). (4) ;})【問題】〔164分〕依據(jù)注釋，補全代碼，在〔1〕至〔4〕處填入正確的內(nèi)容。試題五〔16分〕閱讀以下說明、效果圖和代碼，進展靜態(tài)網(wǎng)頁開發(fā)，答復(fù)以下問題1至問題8?！菊f明】要編寫代碼實現(xiàn)效果。menu，包含首頁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=““>首頁</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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論