Web前端開(kāi)發(fā)初級(jí)實(shí)操考試-1+X證書(shū)試點(diǎn)

1、準(zhǔn)考證號(hào)2019 年下半年 Web 前端開(kāi)發(fā)初級(jí) 實(shí)操考試準(zhǔn)考證號(hào)2019 年下半年 Web 前端開(kāi)發(fā)初級(jí) 實(shí)操考試2. 請(qǐng)?jiān)谥付ㄎ恢没蜷_(kāi)發(fā)環(huán)境下作答。試題一(22 分)閱讀下列說(shuō)明、效果圖和 HTML 代碼，進(jìn)行靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，填寫(xiě)(1)至(11)代碼。【說(shuō)明】 編寫(xiě)該網(wǎng)站效果圖部分代碼。 【效果圖】考生姓名【代碼：首頁(yè) index.html】!商品展示微胖連衣裙2019 網(wǎng)紅初秋女裝黑色休閑褲韓版學(xué)生女裝原創(chuàng)設(shè)計(jì)女裝body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,ddmargin: 0;padding:0;ul(3) : (4) ;/*顯示為塊級(jí)元素*/img(5) :

2、(6) ;/*清理左右浮動(dòng)*/.clear:aftercontent: ;display: block;(7) : (8) ;widthwidth: 100%;.box .conwidth: 1375px;margin:0 auto;.box .con ulpadding-top:30px;/*左浮動(dòng)*/.box .con ul li(9) : (10) ;width: 250px;margin:0 22px 22px 0;border:1px solid #eee;.box .con ul li imgmargin:15px auto 0;.box .con ul li ppadding:1

3、5px;/*設(shè)置鼠標(biāo)移入添加紅色邊框*/.box .con ul li: (11) border:1px solid red;進(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ō)明】 請(qǐng)使用 html+css3 完成以下效果，并在對(duì)應(yīng)代碼處將空缺代碼補(bǔ)全?！拘Ч麍D】(1)圖 2-1 鼠標(biāo)經(jīng)過(guò)前(2)圖 2-2 鼠標(biāo)經(jīng)過(guò)【代碼：】第二題優(yōu)化速度更多營(yíng)銷(xiāo)分析src=imgsrc=img/icon-img3.jpg SEO 和導(dǎo)入鏈接(4) ：(6) ：overflow: hidden;更多(2)(3

4、)更多【代碼】/* 注意：此處省略了部分和本題無(wú)關(guān)的 css 代碼 */.box .con ul lifloat:left;background-color: #fff;width: 380px;(5)(7).box .con ul li.box .con ul li:nth-child(2)margin:0 30px;.box .con ul li img/*此處設(shè)置圖片的過(guò)渡效果為 0.8 秒*/(8) ：0.8s;.box .con ul li p(9)(9)line-height: 140px;border-bottom:1px solid #ddd;font-weight: 600;

5、color:#555;.box .con ul li spandisplay: block;widthwidth: 100%;height:60px;line-height: 60px;/*此處設(shè)置文字的過(guò)渡效果為 0.8 秒*/(11) ：0.8s;.box .con ul li:hover img(12) ： (13) ;.box .con ul li:hover spanbackground-color: #f7c324;font-weight: 600;【問(wèn)題】(26 分，每空 2 分)進(jìn)行靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，補(bǔ)全代碼，在(1)至(13)處填入正確的內(nèi)容。試題三(20 分)閱讀下列說(shuō)明、效果

6、圖和代碼，進(jìn)行靜態(tài)網(wǎng)頁(yè)開(kāi)發(fā)，填寫(xiě)(1)至(10)代碼。【說(shuō)明】 【效果圖】登錄注冊(cè)belbel提交/自定義驗(yàn)證用戶(hù)名的方法function validate_strLenght(str) var regExp = /(w)6,20$/;return regExp.test(str);function validate_email(str) var regExp = /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*$/; return regExp.test(str);/自定義驗(yàn)證密碼的方法function validate_pwd(str) var regExp = /a-zA-Z

7、w5,15/;return regExp.test(str);var username = document.getElementById( () HYPERLINK l _bookmark1 1var email = document. (2) (email);var pwd = document.getElementById( (3) );var pwdOK = document. (4) (pwdOK);/通過(guò)標(biāo)簽名獲取元素var form = document. (5) (form)0;/表單提交form. (6) = function () /使用自定義方法驗(yàn)證用戶(hù)名、驗(yàn)證郵箱if

8、(validate_strLenght( (7) ) & (8) (email.value)& validate_pwd(pwd.value) & checkOk() console.log(username.value)console.log(email.value)console.log(pwd.value)return false; else /控制臺(tái)輸出(9) .log(驗(yàn)證失敗)return false;/ 檢查用戶(hù)名username.onblur = function () if (validate_strLenght(username.value) console.log(用戶(hù)名

9、符合要求) else console.log(用戶(hù)名不符合要求)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(密碼不符合要求)function checkOk() if (pwd.value = pwdOK.value) con

10、sole.log(密碼與重復(fù)密碼一致)return true else console.log(密碼與重復(fù)密碼不一致)return falsepwdOK.onkeyup = checkOk【問(wèn)題】(20 分，每空 2 分)根據(jù)注釋?zhuān)a(bǔ)全代碼，在(1)至(10)處填入正確的內(nèi)容。試題四(16 分)1 至問(wèn)題 4?！菊f(shuō)明】 編寫(xiě)該網(wǎng)站效果圖部分的代碼。 【效果圖】碼 首頁(yè) index.html】手風(fēng)琴效果要求要求要求要求要求要求要求要求要求要求要求要求要求要求要求要 求要求要求信念信念信念信念信念信念信念信念信念信念信念信念信念信念信念信 念信念信念信念信念信念信念信念接受接受接受接受接受接受接受

11、接受接受接受接受接受接受接受接受接 受接受接受接受接受接受接受接受接受現(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í)現(xiàn)實(shí)【代碼 index.js】$(.$(.box ul li h2).click(function(e)e.stopPropagation();/被點(diǎn)擊的 h2 的 next 的 div 下拉展開(kāi)，其余的li 內(nèi)部的 div 上拉收起，時(shí)間8$(this).next().stop(). (1) .parents(li).siblings().find(div).stop(). (2) ;$(this).par

12、ent().stop().addClass(cur).siblings().stop().removeClass(cur);/點(diǎn)擊事件$(document). (3) (function()$(.box ul li).find(div). (4) ;【問(wèn)題】(16 分，每空 4 分)根據(jù)注釋?zhuān)a(bǔ)全代碼，在(1)至(4)處填入正確的內(nèi)容。試題五(16 分)1 至問(wèn)題 8。【說(shuō)明】 要編寫(xiě)代碼實(shí)現(xiàn)效果。s style.css 文件； js 文件夾包含jquery.min.js 和 index.js?！拘Ч麍D】【代碼 index.html】底部菜單首頁(yè)項(xiàng)目項(xiàng)目服務(wù) 中心公告中心資訊資訊我的賬戶(hù)a t

13、ext-decoration: none;color: #333;/*固定定位*/.layout-footer position: (1) ;z-index: 9999;left: (2) ;bottom: (3) ;display: (4) justify-content: width: 100%;height: 50px;border-top: 1px solid gainsboro;color: black;text-align: center;background-color: #f2f2f2;/*此處省略部分與本題無(wú)關(guān)的css*/【代碼 index.js】$(.bottom_nav a).click(function (e) e.stopPro