2023年7月9日发(作者：)

【1+XWeb前端开发初级】样题⼆（理论+实操）下载地址：理论部分2019年下半年 Web前端开发初级 理论考试（考试时间9:00-11:00 共120分钟）1. 本试卷共3道⼤题，满分100分。2. 请在指定位置作答。⼀、单选题（每⼩题2分，共30⼩题，共60分）1. 在html中，下列哪些元素不是双标签元素的是（C）：A、title B、html C、img D、p2. 在html中，图⽚的下⽅有缝隙，去除这个缝隙的⽅法是（D）：A、设置图⽚的border:0B、设置图⽚的border:noneC、设置图⽚的font-size:0D、设置display:block3. 以下说法错误的是（A）：A、html是编程语⾔B、html是描述⽹页的语⾔C、html是超⽂本标记语⾔D、html⽂件的扩展名可以是.html,也可以是.htm4. 在表单中，实现输⼊的数字只显⽰⼩圆点的type类型是（B）：A、text B、password C、radio D、checkbox5. 在css中，下列属于类选择器的是（B）：A、#box B、.box C、div>p D、div6. 由于各个浏览器的内核不同，所以会⽤符号让浏览器识别，下列只有IE6才识别的符号是（B）：A、* B、_ C、*+ D、*:7. 以下关于position的值说法正确的是（D）：A、position:absolute是绝对定位，占据原有空间B、position:fixed是绝对定位，占据原有空间C、position:relative是相对定位，是相对于⾃⾝位置移动，但是不占据原有空间D、position:relative是相对定位，是相对于⾃⾝位置移动，但是占据原有空间8. 让⿏标经过div元素后，元素放⼤2倍，下列代码正确是（A）：A、div:hover{transform:scale(2)}B、div:hover{transform:skey(2)}C、div:hover{transform:tansition(2)}D、div:hover{transform:rotale(2)}9. 让⼀个类名为“con”元素的右上⾓和左下⾓显⽰10px的圆⾓，以下书写正确的是（B）：A、.con{border-radius:10px 0}B、.con{border-radius:0 10px 0 10px}C、.con{border-radius:10px 10px 0 0}D、.con{border-radius:0px 0px 10px 10px}10. 在css3中，⽤来定义过渡动画的属性是（C）：A、transform B、keyframes C、transition D、@font-face11. 关于css书写规范说法正确的是（）：A、在需要写0.5的时候可以省略0，直接写.5B、margin后必须跟4个值C、z-index在任何情况下都可以使⽤D、以上说法都不正确12. 下⾯哪个符号是群组选择符（D）：12. 下⾯哪个符号是群组选择符（D）：A、> B、+ C、空格 D、,13. 实现下拉框中多选的属性是（C）：A、pattern B、maxlength C、multiple D、autofocus14. 在javascript中,关于运算符优先级正确的是（B）：A、算术运算符>逻辑运算符>⽐较运算符>赋值运算符B、算术运算符>⽐较运算符>逻辑运算符>赋值运算符C、⽐较运算符>算术运算符>逻辑运算符>赋值运算符D、⽐较运算符>逻辑运算符>算术运算符>赋值运算符15. 在javascript中，不属于⼀元运算符的是（C）：A、+ B、++ C、* D、--16. 在javascript中,关于+的⽤法说法错误的是（D）：A、+可以⽤来做加法运算B、+可以⽤来链接字符串C、+是⽴即执⾏函数的符号D、+号不能将字符串转数值17. 在javascript中,下列表达式为真的是（A）：A、(3>2)&&trueB、 ![]||("2">12)C、[0]==trueD、Boolean("")18. 在javascript中，下列代码执⾏的结果是（C）：var a;var b = a - 0;if (b == b) {(b * 2 + "2" - 0 + 4);} else {(!b * 2 + "2" - 0 + 8);}A、12 B、NaN C、30 D、报错19. 在javascript中，以下代码执⾏的结果是（A）：function test1(){return

(1)}function test2(){return 0}(test1());(test2());A、undefined,0 B、1,0 C、null,0 D、报错20. 在html中嵌⼊以下代码，在控制台输出的是（B）：A、报错，报错 B、报错，8 C、报错，不输出任何内容 D、a,821. 在javascript中，var arr=[3,45,8,9,12]以下执⾏错误的是（C）：A、执⾏(4)后，arr的值为[3,45,8,9,12,4]B、执⾏()返回12C、执⾏(1,2,"aa")后，arr的值为[3,"aa",8,9,12]D、执⾏()后，arr的值为[45,8,9,12]22. 在javascript中，⽇期对象⾥获取毫秒数的⽅法是（C）：22. 在javascript中，⽇期对象⾥获取毫秒数的⽅法是（C）：A、getDay() B、getDate() C、getTime() D、getFullYear()23. 在javascript中,数学对象说法正确的是（B）：A、()返回0-1之间的数，并包括0和1B、()返回最⼤值C、()是下取整D、()是上取整24. 在javascript中,阻⽌冒泡事件的⽅法是（C）：A、Value = false;B、tDefault()C、opagation()D、以上都不正确25. 在javascript中,返回上⼀页的代码正确的是（A）：A、()B、(1)C、(0)D、d()26. 在jquery中，下⾯哪⼀个是⽤来给指定元素末尾追加元素的（B）：A、inserAfter()B、append()C、appendTo()D、以上都不正确27. 在jquery中，获取表单元素的值是⽅法是（C）A、text() B、html() C、val() D、value()28. 在jquery的遍历中，要找到⼀个表格的指定⾏数的元素，⽤下⾯哪个⽅法（B）？A、text() B、eq() C、get() D、contents()29. 在jquery中想要实现通过http get请求载⼊信息功能的是（D）：A、$.ajax() B、$.post() C、load() D、$.get()30. 在jquery中，选择id为box的元素，以下操作正确的是（B）：A、$(".box") B、$("#box") C、$("box") D、$(#box)⼆、多选题（每⼩题2分，共15⼩题，共30分）1. html⽂件扩展名可以是以下哪⼏种（BD）？A、.php B、.html C、.asp D、.htm2. 下列属于单标签的是（ABC）：A、link B、img C、input D、form3. 关于⽂件命名正确的是（CD）：A、 B、product&

C、 D、product_4. 给div元素设置background:url("../img/") no-repeat -420px -277px;以下说法正确的是（ABC）A、div元素有背景图⽚，且背景图⽚放在img⽂件夹中B、img⽂件夹在当前⽂件的上⼀层⽂件夹中C、背景图⽚不重复D、背景图⽚的位置是向上移动了420px，向右移动了277px5. 关于link和import说法错误的是（CD）：A、@import是 CSS 提供的语法规则，只有导⼊样式表的作⽤B、link是HTML提供的标签，不仅可以加载 CSS ⽂件，还可以定义 RSS、rel 连接属性等C、加载页⾯时，link标签引⼊的 CSS 在页⾯加载完才被加载D、@import引⼊的 CSS 在加载结构的时候同时被加载。6. css样式中的选择符说法正确的是（ABD）：A、div>p 是选择div元素的⼦元素p标签B、div p是选择div元素的所有后代元素C、div+ul是选择div的所有兄弟元素ulC、div+ul是选择div的所有兄弟元素ulD、div~ul是选择div元素后⾯的所有兄弟元素ul7. 需要设置div元素在可视窗⼝的右下⾓显⽰，需要定义哪些属性（BCD）A、position:absoluteB、position:fixedC、right:0D、bottom:08. CSS3新增的功能是（ABCD）A、盒⼦投影 B、⽂字投影 C、@media D、font-face9. 在javascript中，以下表达式为真的是（AC）：A、null==undefinedB、null===undefinedC、"2">"12"D、{}=={}10. 在javascript中，关于构造函数说法正确的是（ABC）：A、构造函数中会隐式的创建this对象B、构造函数中的this指向实例对象C、需要⽤new创建实例对象D、构造函数和⼯⼚函数⽆区别11. 在javascript中，将其他类型转为数值的⽅法是（ABCD）：A、Number()B、parseInt()C、parseFloat()D、以上都正确12. 在javascript中，关于NaN说法正确的是（AC）：A、typeof(NaN)=="number"B、NaN==NaNC、NaN是特殊是数值D、判断变量是不是数值⽤isNaN()⽅法13. 在javascript中,关于数组说法正确的是（ACD）：A、可以⽤new关键词定义B、数组长度⼀旦定义就不能修改C、数组中的unshift()⽅法⽤来给数组的前⾯添加值D、数组中的shift()是删除数组中的第⼀个值，且返回删除的值14. 在jquery中，下列哪⼀个⽅法是对添加移除类操作的（ABCD）：A、addClass() B、removeClass() C、toggleClass() D、attr("class")15. 在jquery中，下⾯哪⼏个属于jquery的事件（BCD）?A、onclick() B、click() C、hover() D、mouseover()三、判断题（每⼩题2分，共5⼩题，共10分。在每⼩题后对应括号内填⼊判断结果，正确的选项填写“√”，错误的选项填写“×”）1、在table标签中，⽤colspan属性来实现跨⾏。（F ）2、在javascript中，break是⽤来终⽌程序执⾏，常⽤于if语句。（F ）3、在javascript中,arguments是存储形参的。（F ）4、CSS中设置阻⽌换⾏的属性是white-space:nowrap。（T ）5、jquery和javascript没有关系。（F ）实操部分试题⼀（30分）阅读下列说明、效果图和HTML代码，进⾏静态⽹页开发，填写（1）⾄（15）代码。【说明】这是⼀个公司的发展历程，⽤html+css完成。项⽬包含⾸页、css⽂件夹，其中，css⽂件夹包含⽂件。请根据效果图和已提供的代码，补全（1）-（15）中的代码。【效果图】（1）在PC端效果如图1-1所⽰。【代码：⾸页】

【代码：CSS⽂件】@charset "utf-8";ul,li{ list-style: none;}body{ font-family: "microsoft yahei"; margin:0; padding:0;}.clearfix:after { content: "."; display: block; height: 0; ______(1)_visibility: hidden_____;/*溢出隐藏*/ clear: both;}.cont{ width:1000px; margin:0 auto; ______(2)_padding:20px 0 50px_____;/*设置内边距上20px

左右为0,下为50px*/}.biz-timeline-box{ width:785px; ______(3)__margin: 0 auto 45px____;/*设置外边距上为0，左右⾃动，下为45px*/}/*选择类.biz-timeline-box的奇数个元素*/.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-eventbox{ _____(6)_border-radius: 0 40px 40px 0_____;/*设置圆⾓，左上⾓为0，右上⾓为40px，右下⾓为40px,左下⾓为0*/ _____(7)_float:right_____;/*向右浮动*/}/*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-eventbox{ border-radius: 40px 0 0 40px; _____(8)_float:left_____;/*向左浮动*/}/*选择类.biz-timeline-box的奇数个元素*/.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-event{ border-radius:0 30px 30px 0;}/*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-event{ border-radius: 30px 0 0 30px;}/*选择类.biz-timeline-box的奇数个元素*/.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-time{ _____(8)__float:left____;/*向左浮动*/ width:344px; text-align: right;}/*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-time{ _____(7)_float:right_____;/*向右浮动*/ width:344px; text-align: left;}/*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:_____(5)_nth-child(even)或者nth-child(2n)_____ .biz_timeline-node{ _____(7)_float:right_____;/*向右浮动*/}/*选择类.biz-timeline-box的奇数个元素*/.biz-timeline-box:______(4)_nth-child(odd)或者nth-child(2n+1)_____ .biz_timeline-node{ _____(8)__float:left____;/*向左浮动*/}.biz_timeline-time{ font-size:16px; color:#d81919; _____(9)__font-weight____: 600;/*设置⽂字加粗*/ _____(10)_line-height_____:73px;/*设置⾏⾼*/}.biz_timeline-eventbox{ width: 336px; height: 69px; _____(11)_border: 4px solid #d94646_____;/*设置边框宽为4px,边框线为实⼼线,颜⾊为#d94646*/ text-align: center;}.biz_timeline-event{ width:323px; height:57px; margin:6px; color:#fff; background:#d94646; text-align: center; font-size:16px; line-height:57px;}.biz_timeline-node{ width:8px; height:8px; _____(12)_border-radius: 50%_____;/*设置圆⾓*/ background: #fff; border:4px solid #b22b2b; margin:29px 40px;}.biz_longString{ _____(13)__position:absolute____;/*设置绝对定位*/ left:50%; width:8px; height:700px; background:#bfbfbf; top:-57px; _____(14)__z-index____:10;/*设置层级*/ margin-left:-4px;}.biz_timtline-box{ _____(15)__position: relative____;/*设置相对定位*/ margin-top:100px;}.biz_timeline{ _____(14)_z-index_____:20;/*设置层级*/ _____(15)_position: relative_____;/*设置相对定位*/}.biz_title{ text-align: center; margin:0 auto 35px;}.biz_title h2{ font-size:28px; color:#d81919;}.biz_title p{ color:#eca7a7; margin-top:15px;}【问题】（30分，每空2分）进⾏静态⽹页开发，补全代码，在（1）⾄（15）处填⼊正确的内容。试题⼆（20分）阅读下列说明、效果图和HTML代码，进⾏静态⽹页开发，填写（1）⾄（10）代码。【说明】这个某项⽬中的其中⼀个活动页，应⽤HTML5和css3技术完成页⾯动画。⿏标没经过是图2-1，当⿏标经过是图2-2，当⿏标经过遮罩层像翻书⼀样显⽰出来。项⽬包含主页、和img⽂件夹。要求页⾯的⽂字随着屏幕的⼤⼩变化⽽变化，根据效果图和已有的代码补全（1）-（10）的代码【效果图】【代码：主页】

【代码：】@charset "utf-8"; /* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea,p,blockquote,th,td { margin:0; padding:0;}ol,ul,li { list-style:none;}a { ___(1)_text-decoration:none____;/*清除下划线*/}.one { width:400px; display:inline-block; margin:20px 20px 40px;}.one .bba { position:relative; ___(2)_transform-style____:preserve-3d;/*让转换的⼦元素保留3D转换*/ ___(3)_perspective____:1000px;/*设置元素被查看位置的视图*/}.one .bba .tu { overflow:hidden;}.one .bba .di { height:260px; width:40%; opacity:0; position:absolute; top:0; left:0; padding:20px; background:#2c3f52; color:#ed4e6e; ___(4)_transform-origin____:left center;/*设置旋转元素的基点位置*/ transform:___(5)_rotateY(-90deg)____;/*设置沿着Y轴旋转-90度*/ transition:___(6)_transform 0.4s,opacity 0.1s____;/*设置过渡属性transform执⾏0.4s,透明的执⾏0.1s*/}.one .bba img { width:400px; height:300px; display:block; position:relative;}.one .bba .di h3 { color:#fff; line-height: 40px;}.one .bba .di a { position:absolute; bottom:20px; right:20px; text-align:center; padding:5px 10px; border-radius:6px; display:inline-block; background:#ed4e6e; color:#fff;}.one .bba:hover img { transform:___(7)__translateX(25%)___;/*设置该img向右位移宽度的四分之⼀*/}.one .bba:hover .di { ___(8)_perspective-origin;____:left center;/*设置 3D 元素的基点位置*/ ___(9)_opacity____:1;/*设置透明度为1*/ transform:___(10)_rotateY(0deg)____;/*设置沿着Y轴旋转0度*/}【问题】（20分，每空2分）进⾏动态⽹页开发，补全代码，在（1）⾄（10）处填⼊正确的内容。试题三（20分）阅读下列说明，⽤javascript编写程序。填写（1）⾄（10）代码。【说明】在某项⽬中，由于⾸页过长，考虑到⽤户的便捷性，需要在添加返回顶部功能，要求⽤javascript完成。⼀开始返回顶部不显⽰ 滚动⼀点之后再显⽰ 点击返回顶部 回到顶部；窗体滚动的时候 判断scrollTop如果⼤于0就显⽰返回顶部 否则就隐藏。返回顶部按钮始终在版⼼的右下⾓根据已经提供的代码，补全（1）-（10）位置上的代码。【效果图】【】布局结构如下代码，并将样式引⼊。

【】body{ margin: 0; padding: 0;}.main{ width: 1000px; margin:0 auto; background-color: pink; height: 2000px; font-size: 50px; line-height: 500px; text-align: center;}#backTop{ display: none; position: fixed; left:50%; margin-left:500px; bottom:0; width: 45px; padding:15px; background: #000; color:#fff; text-align: center; line-height: 32px; font-size: 16px; cursor: pointer; transition: .5s;}【】//通过id获取元素backTopvar backTop = ______(1)__mentById_____("backTop"); //需求：⼀开始返回顶部不显⽰

滚动⼀点之后再显⽰

点击返回顶部

回到顶部

ll = function () {//窗体滚动的时候

判断scrollTop如果⼤于0就显⽰返回顶部

否则就隐藏 backTop.__(2)_style___.display =___(3)_scroll()__.top > 0 ? "__(4)_block___" : "__(5)__none___";};//点击按钮要回去k = function () { //渐渐的滚回去 var timer = ___(6)setInterval____(function () { var target = 0; //获取页⾯当前滚动的距离 var leader = ___(3)_scroll()__.top; var step = (target - leader) / 10; step = step > 0 ? (step) : ___(7)___(step); leader = leader + step; //滚动到leader位置 window.___(8)_scrollTo___(0, leader); if (____(9)_leader === target 或者 leader == target____) { //清除计时器 ____(10)__clearInterval(timer)___; } }, 15);};//封装计算页⾯当前滚动的距离的函数function scroll() { return { top: ffset || Top || Top || 0, left: ffset || Left || Left || 0 };}【问题】（20分，每空2分）⽹页交互，补全代码，在（1）⾄（10）处填⼊正确的内容。试题四（16分）阅读下列说明、效果图和代码，⽤jquery完成指定功能。【说明】页⾯布局，由于每个块所占据的空间不同，所以需要使⽤瀑布流的⽅式布局，因此要求⽤jquery完成此功能，请根据现有的代码和效果图补全代码（1）-（8）【效果图】【】

【】body,ul { padding: 0; margin: 0;}.box { width: 100%;}.box ul { width: 100%;}.box ul li { position: absolute; list-style: none; border: 1px solid #ccc; padding: 1%; margin: 1%; width: 31%; box-sizing: border-box;}.box ul li img { display: block; width: 100%;}【】$(function(){ pubuliu(); //随着窗⼝的⼤⼩变化重新执⾏函数 ____(1)_$(window).resize____(function() { pubuliu(); });})function pubuliu(){ var li=$(".box ul li"),num=3,arr=[]; //获取每个li所占据的宽度 var liW=li.___(2)_outerWidth(true)___; //遍历每个lili.___(3)__each__(function(index,val){ var scrW=idth if(scrW<550){ num=2; ("width","48%") }else{ num=3; ("width","31%") }

if(indexval){ minHeight=val; mindex=index; } }) $(this).css({ top:__(6)_minHeight____, left:__(7)_liW*mindex___+"px" }) arr[___(8)mindex___]=minHeight+$(this).outerHeight(true) } })

}试题五（14分）阅读下列说明、效果图和代码，完成移动端布局。【说明】在某项⽬中，需要登录后才可以看到主页⾯，顾按照效果图完成移动端的登录页⾯布局。项⽬中的⽂件包含、和img⽂件夹。请根据现有的代码和效果图补全代码（1）-（7）【效果图】【】

【】body,h1,h2,h3,h4,h5,h6,ul,p{ margin: 0; padding:0;}body,html{ ____(4)_height: 100%或者height:100vh___;/*设置⾼度为屏幕的⾼度*/}img{ display: block;}ul{ list-style: none;}input{ border:none;}.wrap{ position: relative; width: 100%; max-width: 760px; margin:0 auto; height: 100%;}header,section,footer{ width: 100%;}header{ display: flex; _______(5)_____;/*⽔平居中对齐*/ _______(6)_____;/*垂直居中对齐*/ height: 31.8%; background:url("../img/") no-repeat bottom/100% #7A9AD7;}header .logol{ display: flex; _______(5)_justify-content: center____;/*⽔平居中对齐*/ _______(6)_align-items: center____;/*垂直居中对齐*/ width: 82px; height: 82px; ____(7)__border-radius___: 50%;/*设置圆⾓*/ border:2px solid #B5C5E7; background-color: #fff;}.tabTitle{ margin-top:1em; display: flex; text-align: center; line-height: 40px;

}.tabTitle .title{ width: 50%; border-bottom: 1px solid #E9E9E9;}.tabTitle .{ border-bottom: 1px solid #7C8194;}.form{ display: flex; _______(5)_justify-content: center____;/*⽔平居中对齐*/

}.form form{ width: 80%; margin-top:1em; text-align: center;}.form ul li{ width: 100%; height: 50px; line-height: 50px; display: flex; _______(6)_align-items: center____;/*垂直居中对齐*/ border-bottom:1px solid #ABAFB2;}.form form div{ border-bottom:none; line-height: 40px; text-align: right;}.form form div a{ text-decoration: none; color:#666; font-size: 12px;}.form form button{ width: 60%; height: 50px; line-height: 50px; background-color: #7A9AD7; ____(7)__border-radius___: 25px; border:none; color: #fff;}.otherLogin ul{ display: flex; _______(5)_justify-content: center____;/*⽔平居中对齐*/}.otherLogin h2{ text-align: center; font-weight: normal; font-size: 18px; line-height: 40px; margin:1em 0; color: #555;}.otherLogin h2:before{ position: relative; top:23px; left:50%; transform: translateX(-50%); z-index: -1; content:""; display: block; width: 80%; height:1px; background-color: #E9E9E9;}.otherLogin h2 a{ padding:0 10px; background-color: #fff;}.otherLogin ul li{ margin:0 10px;}footer p{ position: absolute; width: 100%; height: 30px; line-height: 30px; font-size: 12px; bottom:10px; text-align: center;}footer p a{ text-decoration: none; color:#506081;}