1+x 证书 Web 前端开发初级实操考试（试卷 8 ） / 开普饭

共 55 道题总分：200 分形考总分：0 分

一、单选题共 30 题，60 分

1. 实现向右的红色三角形，样式实现正确的是（）

<div class="icon"></div>

A.icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-left-color:#f00; }

B.icon{width:0; height:0; overflow:hidden; border:5px solid #f00; border-left-color:transparent;}

C.icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-right-color:#f00;}

D.icon{width:0; height:0; overflow:hidden; border:5px solid #f00; border-right-color:transparent;}

2.p 下面除了 span 以外所有标签，旋转 45 度（）

- *A*p :not(span){transform:rotate(45deg)}
- *B*p :not(span){translate:rotate(45deg)}
- *C*p not(:span){transform:rotate(45deg)}
- *D*p:not(span){rotate(45deg)}

3.jquery 中遍历指定的对象和数组是哪个方法（）

A$.each( object, callback )
B$(selector).each(function())
Cforeach()
Dfor ...in

4.arguments 是一个类似于数组的对象。对命名参数的引用可以使用参数名也可以使用（）的方式来进行引用：

Afunction argument[n]
Barguments.n
Carguments[n]
Disfunction

5. 下面代码的打印结果是 ( )

var cars = ['bmw','qq','byd','glof']; cars.splice(2,0,'polo'); console.log(cars);

A["bmw", "qq", "byd", "polo", "glof"]
B["bmw", "qq", "polo", "glof"]
C["bmw", "qq", "polo", "byd", "glof"]
D 以上都不对

6. 下面是兄弟选择器的选项是（）

A#ul2+p
B#ul2~p
C#ul2>p
D#ul2 p

7. 以下是画布可以画图像的是（）

Avideo
Baudio
Ccanvas
Dheader

8. 在 jQuery 中，不属于鼠标事件的是（）

Amouseover
Bmouseenter
Ckeydown
Dmousemove

9.input 标签的值是用哪个属性来描述的（）

Atype
Bdisabled
Cid
Dvalue

10. 以下哪个的优先级最高（）

Aclass
Bid
C!important
D 行内

11. 下面代码的打印结果是 ( )

for(var i=0;i<=30;i+=5){ if(i%3==0){ continue; } console.log(i); }

A5,10,15,20,25,30
B5,15
C5,15,25
D5,10,20,25

12. 想要给个 a 标签设置 width 和 height，需要给 a 标签添加哪个样式（）

Adisplay:inline;
Boverflow:hidden;
Cfont-size:0;
Ddisplay:block;

13. 设置主轴方向的弹性盒子元素的对齐方式可以使用（）属性实现

Aalign-content
Bjustify-content
Calign-self
Dalign-items

14. 参数序号从 1 开始的是哪个选择器（）

Anth-of-type
Bnth-child
C:first
D:eq

15. 以下代码执行结果正确的是 ( )

var a = 2; switch (a) { case 1: alert("1"); case 2: alert("2"); case 3: alert("3");

default: alert('4'); }

A 分别弹出 1234
B 分别弹出 234
C 程序报错
D 只弹出 2

16.flex-grow 的作用是（）

A 弹性盒子元素对齐方式
B 弹性盒子元素的排列方式
C 弹性盒子元素显示次序
D 弹性盒子元素如何分配剩余空间

17. 以下哪个方法是对数组进行排序（）

Asort
Breverse
Cpop
Dslice

18. 以下哪些不是块标签的是（）

Aspan
Bp
Cdiv
Dul

19. 以下能生效的样式选项是（）

<style> p{ color:yellow; } .classB{ color:red; } .classA{ color:blue; } </style> <p class='classB classA'> 123 </p>

Ayellow
Bred
Cblue
Dblack

20.meta 标签中 name 属性值是关键字的是（）

Adescription
Bauthor
Ckeyword
Dgenerator

21.javascript 怎样将一个 checkbox 设为无效，假设该 checkbox 的 id 为 checkAll ( )

Adocument.getElementById("checkAll").enabled = false;
Bdocument.getElementById("checkAll").disabled = true;
Cdocument.getElementById("checkAll").enabled = true;
Ddocument.getElementById("checkAll").disabled = "disabled";

22. 以下这段代码的作用是（）

@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } }

A 是当宽度大于 960px 小于 1200px 的时候 body 的背景色为 yellow
B 是当宽度大于 960px 的时候 body 的背景色为 yellow
C 以上写法都不正确
D 是当宽度小于 1200px 的时候 body 的背景色为 yellow

23. 实现点击文本也能控制复选框，以下设置正确的是（）

- *A*<input type="checkbox" name="music" /><label for="music">音乐</label>
- *B*<input type="checkbox" id="music" /><label for="music">音乐</label>
- *C*<input type="checkbox" name="music" /><label id="music">音乐</label>
- *D*<input type="checkbox" id="music" /><label name="music">音乐</label>

24. 如果按下的是回车键：js 中正确的判断方式是（）

Aif(event.keyCode == 39)
Bif(event.keyCode == 38)
Cif(event.keyCode == 32)
Dif(event.keyCode == 31)

25. 哪一个标记用于使 HTML 文档中表格里的单元格在同行进行合并（）
Acellspacing
Bcellpadding
Crowspan
Dcolspan

26. 如何清除 ul 的浮动（）
Aul li:last-child{clear:both}
Bul:after{content:"";clear:both;display:block}
Cul{clear:both}
Dul:before{content:"";clear:both;display:block}

27.var v; 该语句定义了一个变量 v，它的值是？正确答案是（）
A1
Bundefined
C0
Dnull

28.placeholder 的作用是（）
A 为文本框设置默认提示文字
B 为文本框设置对齐样式
C 为文本框设置默认值
D 以上说法都不正确

29. 正确答案是（）

size="true";console.log(typeof size);

- *A*string
- *B*number
- *C*undefined
- *D*boolean

30.在当前页面index.html中插入与index.html处于同一级的img文件夹下的logo.jpg，正确的导入写法是（ ）

- ```
  - *A*<img src="img/logo.jpg">
  - *B*<img href="img/logo.jpg">
  - *C*<img src="../img/logo.jpg">
  - *D*<img href="../img/logo.jpg">

## 二、多选题共 15 题，30 分

1.div span {margin-left:10px;} 通过以下哪些语句可以将第一个 span 元素的 margin 取消 ( )

Aiv span:first-child{margin:0}
Bdiv span:nth-child(0){margin:0;}
Cdiv span:nth-child(1){margin:0}
Ddiv span{margin:0}

2. 以下语句语法正确的有（）

- *A*document.getElementsByTagName("body")[0].innerHTML = "HELLO"
- *B*document.getElementById("box").style.border-top="1px solid #f00"
- *C*document.getElementsByTagName("div")[0].innerHTML = '<b>hello</b>';
- *D*document.getElementsByTagName("body").style.paddingTop = "10px";

3. 以下哪些属性属于弹性盒子的（）

Aflex-shrink
Bflex-grow
Cborder
Dmargin

4. 以下是单独可以不用闭合的标签是（）

- *A*<br />
- *B*<hr />
- *C*<input />
- *D*<img />

5.#wrap {width:600px;height:200px;background:#ccc;position:absolute;} 实现 wrap 在浏览器中水平和垂直都居中，需要设置的样式有 ( )

Amargin-left:-300px;margin-top:-100px;
Bleft:300px;top:100px;
Cleft:50%;top:50%;
Dmargin-left:-300px;margin-top:100px;

6. 背景 background 属性包括（）

Abackground-size
Bbackground-origin
Ctext-align
Dbackground-clip

7. 假设 btn 是获取到的按钮，点击按钮调用 checkCity 这样一个函数，以下写法正确的有哪些（）

Abtn.onclick = function(){checkCity;}
Bbtn.onclick = function(){checkCity();}
Cbtn.onclick = checkCity;
Dbtn.onclick = checkCity()

8.HTML5 新增的标签有哪些（）

Aheader
Bnav
Cfooter
Dsection

9. 以下哪些语句可以打印 1-100 之间所有的奇数（）

Afor(var i=1;i<=100;i++){if(i%2==1){console.log(i);}}
Bfor(var i=1;i<=100;i+=1){console.log(i);}
Cfor(var i=1;i<=100;i++){if(i%2==0){console.log(i);}}
Dfor(var i=1;i<=100;i+=2){console.log(i);}

10.img 标签有文字提示特性的属性（）

Atitle
Btite
Calt
Dheight

11. 以下哪些元素属于块元素 ( )

Aa
Bnav
Cheader
Dul

12. 下面选项中 jquery 焦点事件的有（）

Ablur()
Bselect()
Cfocus()
Donfocus()

13. 在 jQuery 中，通过 jQuery 对象.css ( ) 可实现样式控制，以下说法正确的是（）

Acss ( ) 方法会去除原有样式而设置新样式
B 正确语法：css (“属性”,” 值”)
Ccss ( ) 方法不会去除原有样式
D 正确语法：css (“属性”)

14. 以下哪些样式可以隐藏元素 ( )

Avisibility:hidden;
Bdisplay:show;
Cdisplay:none;
Dopacity:0;

15. 哪些是动画效果 ( )

Atransition
Banimation
Cstatic
Drelative

三、判断题共 5 题，10 分

1. 此句可以实现当文本框获得焦点时添加盒阴影效果。（）

input[type="text"]:focus{box-shadow:2px 2px 2px blue;}

A 对
B 错

2.var a=b=6; b=3 console.log (a) 的值为 3 吗（）

A 对
B 错

3. 在 jquery 中指定的元素后面追加内容是 after 吗（）

A 对
B 错

4.margin-top 与 padding-top 对行内元素都起作用（）

A 对
B 错

5.CSS 中 transition 是用来控制元素变形样式的（）

A 对
B 错

理论题答案解析

1.A	2.A	3.A	4.C	5.C
6.B	7.C	8.C	9.D	10.C
11.D	12.D	13.B	14.A	15.B
16.D	17.A	18.A	19.C	20.C
21.B	22.A	23.B	24.C	25.C
26.B	27.B	28.A	29.A	30.A
1.AC	2.AC	3.AB	4.ABCD	5.BC
6.ABD	7.BC	8.ABCD	9.AD	10.AC
11.BCD	12.AC	13.AB	14.ACD	15.AB
1. 对	2. 错	3. 对	4. 错	5. 错

四、客观填空题共 5 题，100 分

1. 阅读下列说明、效果图和 HTML 代码，进行静态网页开发，填写（1）至（20）代码。
【说明】
这是某茶叶公司的官网，以下效果图是商品展示页，现在我们需要编写该网站效果图的部分代码。
该项目包含 prolist.html、css 文件夹、img 文件夹，其中，css 文件夹包含 include.css 文件；img 文件夹包含所用到的图片。
【效果图】

【代码：首页prolist.html】
<!DOCTYPE html>
<html>
    <head>
        <
1
charset="UTF-8">
        <title>第一题-茶叶公司</title>
        <meta name="keywords" content="">
        <meta name="description" content=" ">
        <link rel="stylesheet" type="text/css" href="
2
" />
    </head>
    <body>
        <div class="singlepage">
            <div class="singlepage_center">
                <div class="left">
                    <a href="#" class="active">网站首页</a>
                    <a href="#">单页导航</a>
                    <a href="#">单页导航</a>
                    <a href="prolist.html">产品列表</a>
                    <a href="#">新闻列表</a>
                </div>
                <div class="right">
                    <div class="tp">
                        <img src="imgs/tp.png" />
                    </div>
                    <div class="infobox">
                        <div class="h3">产品列表</div>
                        <div class="info prolistgroup">
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                            <div class="list_li">
                                <a href="">
                                    <span>
                                        <img src="imgs/1505959883391632.jpg"/>
                                    </span>
                                    <strong>产品名称</strong>
                                </a>
                            </div>
                        </div>

                        <div class="fanye">
                            <ul class="pagination">
                                <li class="disabled"><span>«</span></li>
                                <li class="active"><span>1</span></li>
                                <li>
                                    <a href="">2</a>
                                </li>
                                <li>
                                    <a href="">3</a>
                                </li>
                                <li>
                                    <a href="">4</a>
                                </li>
                                <li>
                                    <a href="">»</a>
                                </li>
                            </ul>
                        </div>

                        <div class="hotnews">
                            <h4>热门资讯</h4>
                            <ul>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                                <li>
                                    <a href="">专注于新时代养生健康食品和养...</a> <span>2018-11-19</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="bt">
                        <img src="imgs/bt.png" />
                    </div>
                </div>
            </div>
        </div>

    </body>

</html>
【代码：CSS文件include.css】
body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,form{
  font-size: 14px;

3
;/*设置外边距为0*/

4
;/*设置内边距为0*/
}
body {
  font-size: 12px;

5
;/*设置字体为微软雅黑*/
}
ul,ol {

6
;/*清除列表默认样式*/
}
a {

7
;/*清除下划线*/
}
.clear {

8
;/*清除浮动*/
  float: none;
  height: 0;
  overflow: hidden;
}
html .hide {

9
;/*隐藏元素，并不占据原有空间*/
}

.singlepage {

10
;/*设置最小高度为800px*/
  padding: 20px 0 20px;
  background: url(../imgs/xsb.jpg)
11
no-repeat;/*设置背景底部居中对齐*/
}
.singlepage .singlepage_center {
  display: flex;
  width: 1200px;

12
;/*设置弹性子元素两端对齐*/

13
;/*设置外边距上20px  下0px 左右自动*/
}
.singlepage .singlepage_center .left {
  width: 160px;
  height: 452px;
  padding: 40px 20px 0;
  background: #ffffff url(../imgs/left.png) top center no-repeat;
}
.singlepage .singlepage_center .left a {
  display: block;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: "楷书";
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 1px dotted #ddd;
  color: #000000;

14
;/*设置文字居中对齐*/
}
.singlepage .singlepage_center .right {
  margin-bottom: 20px;
  width: 960px;

15
;/*设置盒模型为IE盒模型*/
  border: 2px solid #000;
  background: #fff;
}
.singlepage .singlepage_center .right .tp,
.singlepage .singlepage_center .right .bt {
  width: 100%;
}
.singlepage .singlepage_center .right .tp img,
.singlepage .singlepage_center .right .bt img {
  width: 100%;
  display: block;
}
.singlepage .singlepage_center .right .infobox {
  padding: 0 40px;
  min-height: 850px;
}
.singlepage .singlepage_center .right .infobox .other {
  text-align: center;
  font-size: 14px;
  padding-bottom: 20px;
  color: #549014;
  justify-content: center;
  display: flex;
}
.singlepage .singlepage_center .right .infobox .other span {
  margin: 0 10px;
}
.singlepage .singlepage_center .right .infobox .h3 {
  padding-bottom: 40px;
  margin-bottom: 20px;
  font-size: 32px;

16
: bold;/*设置字体加粗的属性*/
  text-align: center;
  color: #333;
  border-bottom: 2px dotted #ddd;
}
.singlepage .singlepage_center .right .infobox .info {
  font-size: 16px;
  line-height: 2;
  color: #666;
}
.singlepage .singlepage_center .right .infobox .info * {
  max-width: 100%;
}
.prolistgroup {

17
;/*设置溢出隐藏*/
}
.prolistgroup .list_li {
  width: 232px;
  height: 232px;
  padding: 20px;
  float: left;
  margin: 0 30px 30px 0;
  position: relative;
  background: #ffffff url(../imgs/kuang.png) center center no-repeat;

18
: 100% 100%;/*设置背景大小*/
}
.prolistgroup .list_li:nth-child(3n+0) {
  margin-right: 0;
}
.prolistgroup .list_li span {
  display: block;
  width: 232px;
  height: 232px;
}
.prolistgroup .list_li span img {
  width: 100%;
  height: 100%;
}
.prolistgroup .list_li strong {
  display: block;

19
;/*设置绝对定位*/
  background: #549014;
  width: 232px;
  height: 30px;
  line-height: 30px;
  bottom: 20px;
  color: #fff;
  text-align: center;
  font-weight: normal;
  background: rgba(6, 171, 4, 0.3);
  font-size: 14px;
}

.hotnews {
  padding-top: 35px;
  margin-bottom: 10px;
}
.hotnews h4 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.hotnews ul {
  overflow: hidden;
  margin-top: 20px;
}
.hotnews ul li {
  float: left;
  width: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-right: 5%;
}
.hotnews ul li a {
  padding-bottom: 15px;
  color: #333333;
  font-size: 16px;
  display: block;
}
.fanye ul {
  text-align: center;
}
.fanye ul li {
  display: inline-block;
  margin: 0 5px;
  background: url(../imgs/yuan.png) center center no-repeat;
  background-size: 100% 100%;

20
: 50%;/*设置圆角*/
}
.fanye ul li a,
.fanye ul li span {
  padding: 20px;
  width: 30px;
  line-height: 30px;
  height: 30px;
  display: block;
  font-size: 20px;
  color: #333;
}
.fanye ul li span {
  color: #333;
}
.fanye ul .active {
  background: url(../imgs/gtea.png) center center no-repeat;
  background-size: 100% 100%!important;
  color: #549014!important;
}
.fanye ul .active span {
  background: url(../imgs/gtea.png) center center no-repeat;
  background-size: 100% 100%!important;
  color: #549014!important;
}

【问题】
进行静态网页开发，补全代码，在（1）至（20）处填入正确的内容。

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/27/6371044860824341573075105.zip

打开解析

（1）meta

（2）css/include.css

（3）margin:0

（4）padding:0

（5）font-family: "微软雅黑"

（6）list-style: none

（7）text-decoration: none

（8）clear: both

（9）display: none

（10）min-height: 800px

（11）bottom center

（12）justify-content: space-between

（13）margin: 20px auto 0

（14）text-align: center

（15）box-sizing: border-box

（16）font-weight

（17）overflow: hidden

（18）background-size

（19）position: absolute

（20）border-radius

阅读下列说明、效果图，进行静态网页开发，填写（1）至（10）代码。
【说明】

现接到一个项目，是企业信息展示网站，为提高用户的体验，现需要用 CSS3 实现摇动效果的下拉菜单。
项目包含首页 index.html、css 文件夹。根据已有代码和效果图，在对应代码处将空缺代码补全。
【效果图】

【index.html代码】
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>第二题-css3实现动画</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="container">
    <ul id="menu">
        <li>
            <a href="#">主菜单一</a>
            <ul>
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
                <li><a href="#">子菜单1-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">主菜单二</a>
            <ul>
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
                <li><a href="#">子菜单2-3</a></li>
                <li><a href="#">子菜单2-4</a></li>
                <li><a href="#">子菜单2-5</a></li>
                <li><a href="#">子菜单2-6</a></li>
            </ul>
        </li>
        <li>
            <a href="#">主菜单三</a>
            <ul>
                <li><a href="#">子菜单3-1</a></li>
                <li><a href="#">子菜单3-2</a></li>
                <li><a href="#">子菜单3-3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">主菜单四</a>
            <ul>
                <li><a href="#">子菜单4-1</a></li>
                <li><a href="#">子菜单4-2</a></li>
                <li><a href="#">子菜单4-3</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
【index.css代码】
* {
    margin: 0;
padding: 0;
list-style-type:none;
}
body {
    padding: 30px;
    font-family: "Helvetica Neue", helvetica, arial;
    background: url('http://subtlepatterns.com/patterns/white_carbonfiber.png');
}

#container {
    position: relative;
    width: 940px;
}

#container:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

#menu {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 20px;
    border-radius: 3px;

1
: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15); /*设盒子阴影*/
    background: #ccc;
}
#menu, #menu ul {
    list-style: none;
}
#menu > li {
    float: left;

2
; /*相对定位*/
    border-right: 1px solid rgba(0,0,0,.1);
    box-shadow: 1px 0 0 rgba(255,255,255,.25); /*设盒子阴影*/
    perspective: 1000px; 

}
/*设置第一个li元素*/
#menu > li
3
{
    border-left: 1px solid rgba(255,255,255,.25);
    box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menu li li{float:left;}
#menu a {
    display: block;
    float:left;
    position: relative;

4
:10;/*设置层级为10*/
    padding: 13px 20px 13px 20px;
    text-decoration: none;
    color: rgba(75,75,75,1);
    line-height: 1;
    font-weight: 600;
    font-size: 12px;

5
: -.05em;/*设置字符间距*/
    background: transparent;        

6
: 0 1px 1px rgba(255,255,255,.9);/*设置文字投影*/
    transition: all .25s ease-in-out;

}

#menu > li:hover > a {
    background: #333;
    color: rgba(0,223,252,1);
    text-shadow: none;
}

#menu li ul  {
    position: absolute;
    top:38px;
    left: 0;
    z-index: 10: 1;/*设置层级*/
    width: 200px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: transparent;
    overflow: hidden;

7
: 50% 0%;/*设置旋转元素的基点位置*/
}

#menu li:hover ul {

    padding: 15px 0;
    background: #333;
    opacity: 1;
    visibility: visible;
    box-shadow: 1px 1px 7px rgba(0,0,0,.5);
    animation-name: swingdown;

8
: 1s;/*设置动画执行时间*/
    animation-timing-function: ease;

}
/*定义动画*/

9
swingdown {
    0% {
        opacity: .99999;

10
: rotateX(90deg);
    }

    30% {
        transform: rotateX(-20deg) rotateY(5deg);
        animation-timing-function: ease-in-out;
    }

    65% {
        transform: rotateX(20deg) rotateY(-3deg);
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: rotateX(0);
        animation-timing-function: ease-in-out;
    }
}

#menu li li a {
    padding-left: 15px;
    font-weight: 400;
    color: #ddd;
    text-shadow: none;
    border-top: dotted 1px transparent;
    border-bottom: dotted 1px transparent;
    transition: all .15s linear;
}

#menu li li a:hover {
    color: rgba(0,223,252,1);
    border-top: dotted 1px rgba(255,255,255,.15);
    border-bottom: dotted 1px rgba(255,255,255,.15);
    background: rgba(0,223,252,.02);
}

【问题】
进行静态网页开发，补全代码，在（1）至（10）处填入正确的内容。

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/27/6371044965842227422972023.zip

打开解析

（1）box-shadow

（2）position

（3）:first-child:relative

（4）z-index: 10

（5）letter-spacing

（6）text-shadow

（7）transform-origin

（8）animation-duration

（9）@keyframes

（10）transform

阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（10）代码。
【说明】

某电商网站需要我们完成购物车模块的功能。具体要求：请使用 tool.js 中已经封装好的方法来获取元素，保证在低版本浏览器也可以执行。
现提供的项目文件有 shop.html、css 文件夹、js 文件夹，其中，css 文件夹包含 shopCar.css 文件，js 文件夹包含 shopCar2.js 和 tool.js 文件。根据已经提供的代码，补全空缺处的代码。
【效果图】

【代码：shopCar2.js】
html和css代码在文件中查看，请仔细阅读js文件夹中tool.js中的代码，然后补充shopCar2.js文件。

//获取元素
var box=document.getElementById("box");
var shop=
1
("shop",box);
var product=getbyClass("product",box);
var jian=getbyClass("jian",box);
var add=getbyClass("add",box);
var rmb=getbyClass("rmb",box);
var pic=getbyClass("pic",box);
var inputText=
2
("num");//根据name名获取元素

var all=document.getElementsByName("all")[0];
var shopCheck=document.getElementsByName("shop");
var prodCheck=document.getElementsByName("check");
var list=getbyClass("list",box);

// 初始化
init();
function init(){
    for(var i=0;i<product.length;i++){
        if(inputText[i].value==1){

3
;//减号隐藏，且保留原有空间
        }
        if(inputText[i].value==10){

4
;//加号隐藏，且保留原有空间;
        }
        sum(i);
    }
}
// 绑定加
for(var a=0;a<add.length;a++){
add[a].index=a;
//绑定点击事件
    add[a].
5
=function(){
        var text=
6
;//获取文本框；
        text.value++;
        if(text.value>=10){
            text.value=10;
            this.style.visibility="hidden";
        }
        if(text.value<10){
            jian[this.index].style.visibility="visible";
        }
        sum(this.index);
    }
}
// 绑定减
for(var j=0;j<jian.length;j++){
    jian[j].index=j;
    jian[j].onclick=function(){
        var text=inputText[this.index];
        text.value--;
        if(text.value<=1){
            text.value=1;
            this.style.visibility="hidden";
        }
        if(text.value>1){
            add[this.index].style.visibility="visible";
        }
        sum(this.index);
    }
}
//  小计的值
function sum(index){
    // console.log(index);
    var prodSum=pic[index].innerText*inputText[index].value;
    rmb[index].innerText=prodSum;
    total();
}

// 全选与反选
all.onclick=function(){
    if(all.checked){
        for(var s=0;s<shopCheck.length;s++){

7
;//设置选中状态
            checked(s);
        }
    }else{
        for(var s=0;s<shopCheck.length;s++){

8
;//设置未选中状态
            checked(s);
        }
    }
    total();
}

function checked(s){
    var shopProd=getbyClass("checkbox",shop[s].parentNode);
    if(shopCheck[s].checked){
        for(var c=0;c<shopProd.length;c++){
            shopProd[c].checked=true;
        }
    }else{
        for(var c=0;c<shopProd.length;c++){
            shopProd[c].checked=false;
        }
    }
}

// 点击店名
for(var s=0;s<shopCheck.length;s++){
    shopCheck[s].index=s;
    shopCheck[s].onclick=function(){
        var count=0;
        checked(this.index);
        shopLenght();
        total();
    }
}
// 点击产品复选框
for(var i=0;i<list.length;i++){
    list[i].index=i;
    var checkbox=getbyClass("checkbox",list[i]);
    for(var c=0;c<checkbox.length;c++){
        checkbox[c].onclick=function(){
            checkLength(this.parentNode.parentNode.parentNode.index);
            total();
        }
    }
}

function checkLength(index){
    var numC=0;
    var checkbox=getbyClass("checkbox",list[index]);
    for(c=0;c<checkbox.length;c++){
        if(checkbox[c].checked){
            numC++;
        }
    }
    console.log(shopCheck[index]);
    if(numC==checkbox.length){
        shopCheck[index].checked=true;
    }else{
        shopCheck[index].checked=false;
    }
    shopLenght();
}

function shopLenght(){
    var numP=0
    for(var s=0;s<shopCheck.length;s++){
        if(shopCheck[s].checked){
            numP++
        }
    }
    if(numP==shopCheck.length){
        all.checked=true;
    }else{
        all.checked=false;
    }
}

// 计算总金额
function total(){
    var sum=0;
    for(var i=0;i<product.length;i++){
        if(
9
){
            // console.log(rmb[i].innerText);
            sum+=Number(rmb[i].innerText);
        }
    }
    document.getElementById("total").
10
=sum;
}

【问题】
根据注释，补全代码，在（1）至（10）处填入正确的内容。

素材.ziphttp://www.x-academy.net/UploadFile/UploadFile/2019/11/27/6371045140413382475421279.zip

打开解析

（1）getbyClass

（2）document.getElementsByName

（3）jian[i].style.visibility="hidden"

（4）add[i].style.visibility="hidden"

（5）onclick

（6）inputText[this.index]

（7）shopCheck[s].checked=true

（8）shopCheck[s].checked=false

（9）prodCheck[i].checked 或者prodCheck[i].checked==true

（10）innerText

阅读下列说明、效果图和代码，进行静态网页开发，回答问题 1 至问题 5。
【说明】

某互联网公司开发官网的首页，在移动端导航要固定在页面的底部。页面底部的图标采用自定义图标完成，现在需要编写代码实现效果。
项目名称为 menu，包含首页 index.html、css 文件夹、font 文件夹，其中，css 文件夹包含 style.css 文件，font 文件夹是所需要的字体文件。
【效果图】

【代码 index.html】
<!DOCTYPE html>
<html>
<head>
    <title>第五题-移动端底部导航</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <footer>
        <div class="home"><i></i>主页</div>
        <div class="order"><i></i>订单</div>
        <div class="shop"><i></i>购物车</div>
        <div class="user"><i></i>我的</div>
    </footer>
</body>

</html>

【代码 style.css】
/*自定义图标字体*/

1
{
  font-family: 'iconfont';
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
      url('../font/iconfont.woff2') format('woff2'),
      url('../font/iconfont.woff') format('woff'),
      url('../font/iconfont.ttf') format('truetype'),
      url('../font/iconfont.svg#iconfont') format('svg');
}
body{
    margin:0;
    padding:0;
}
footer{

2
;/*设置弹性盒子*/

3
;/*水平对齐，两边间距是中间间距的一半*/

4
;/*垂直居中对齐*/
    position: fixed;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width: 100%;
    height: 50px;
    border-top:1px solid #ccc;
    max-width: 760px;
    font-size: 12px;
    text-align: center;
}
footer div{
    width: 80px;
}
footer div i{

5
;/*设置自定义图标字体*/
    font-size: 18px;
    font-style: normal;
    display: block;
}
footer .home i:before{
    content:"\e6ce";
}
footer .order i:before{
    content:"\e67c";
}
footer .shop i:before{
    content:"\e60c";
}
footer .user i:before{
    content:"\e66e";
}

【问题】
根据注释，补全代码，在（1）至（5）处填入正确的内容。

素材.zip

打开解析

（1） @font-face

（2）display: flex;

（3）justify-content: space-around

（4）align-items: center

（5）font-family: "iconfont"

阅读下列说明、效果图和代码，完成交互效果，回答问题 1 至问题 5。
【说明】

某公司要制作自己的官网首页，经过研究，需要采用手风琴效果。现在我们需要编写该网站效果图部分的代码。
项目包含首页 index.html、css 文件夹、js 文件夹，其中，css 文件夹包含 style.css 文件；js 文件夹包含 jquery.min.js 和 script.js。
【效果图】

【代码 首页index.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第四题--手风琴</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <section class="main_box">
        <div class="box">
            <ul>
                <li class="on">
                    <a href="#">
                        <h3>游戏手机</h3>
                        <p>王者荣耀版领卷减300</p>
                        <img src="images/1.png" alt="img">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>游戏手机</h3>
                        <p>王者荣耀版领卷减300</p>
                        <img src="images/2.png" alt="img">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>游戏手机</h3>
                        <p>王者荣耀版领卷减300</p>
                        <img src="images/3.png" alt="img">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>游戏手机</h3>
                        <p>王者荣耀版领卷减300</p>
                        <img src="images/4.png" alt="img">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>游戏手机</h3>
                        <p>王者荣耀版领卷减300</p>
                        <img src="images/5.png" alt="img">
                    </a>
                </li>
            </ul>
        </div>
    </section>
<!--引入jquery库-->
    <script src="
1
"></script>
    <script src="js/script.js"></script>
</body>
</html>

【代码 script.js】
需要用jquery实现鼠标经过,展开当前元素，也就是添加“on”这个类，根据效果完成功能。
//鼠标经过li时触发函数

2
(function(){
    $(this).
3
('on').
4
().
5
('on');
});

【问题】
根据注释，补全代码，在（1）至（5）处填入正确的内容。

素材.zip

打开解析

（1）js/jquery.min.js

（2）$(".box ul li").hover

（3）addClass

（4）siblings

（5）removeClass

1+x 证书 web 前端开发初级对应课程分析
http://blog.zh66.club/index.php/archives/194/

1+X 证书 Web 前端开发中级对应课程分析
http://blog.zh66.club/index.php/archives/195/

1+x 证书 Web 前端开发初级理论考试样题 2019
http://blog.zh66.club/index.php/archives/149/

1+x 证书 Web 前端开发初级实操考试样题 2019
http://blog.zh66.club/index.php/archives/150/

1+x 证书 Web 前端开发中级理论考试样题 2019
http://blog.zh66.club/index.php/archives/151/

1+x 证书 Web 前端开发中级实操考试样题 2019
http://blog.zh66.club/index.php/archives/152/

1+x 证书 Web 前端开发初级理论教案
http://blog.zh66.club/index.php/archives/322/

1+x 证书 Web 前端开发中级理论教案
http://blog.zh66.club/index.php/archives/320/

1+x 证书 Web 前端开发中级理论考试（试卷 1）
http://blog.zh66.club/index.php/archives/153/

1+x 证书 Web 前端开发中级理论考试（试卷 2 ）
http://blog.zh66.club/index.php/archives/154

1+x 证书 Web 前端开发中级理论考试（试卷 3 ）
http://blog.zh66.club/index.php/archives/170/

1+x 证书 Web 前端开发中级理论考试（试卷 4 ）
http://blog.zh66.club/index.php/archives/191/

1+x 证书 Web 前端开发中级理论考试（试卷 5 ）
http://blog.zh66.club/index.php/archives/297/

1+x 证书 Web 前端开发中级理论考试（试卷 6）
http://blog.zh66.club/index.php/archives/319/

1+x 证书 Web 前端开发初级理论考试（试卷 7 ）
http://blog.zh66.club/index.php/archives/412/

1+x 证书 Web 前端开发初级理论考试（试卷 8 ）http://blog.zh66.club/index.php/archives/414/

1+x 证书 Web 前端开发初级级理论考试（试卷 2 ）
http://blog.zh66.club/index.php/archives/176/

1+x 证书 Web 前端开发初级级理论考试（试卷 3 ）
http://blog.zh66.club/index.php/archives/299/

1+x 证书 Web 前端开发初级级理论考试（试卷 4 ）
http://blog.zh66.club/index.php/archives/315/

《Web 前端开发》等级考试样题～以国家 “1+X” 职业技能证书为标准，厚溥推出 Web 前端开发人才培养方案
http://blog.zh66.club/index.php/archives/156/

pdf 版查看链接三套完整版
http://blog.zh66.club/usr/uploads/2019/12/4294434490.pdf
http://blog.zh66.club/usr/uploads/2019/12/2430725541.pdf
http://blog.zh66.club/usr/uploads/2019/12/761774577.pdf

1+x 证书 Web 前端开发初级实操考试（试卷 8 ）

一、单选题共 30 题，60 分

三、判断题共 5 题，10 分

理论题答案解析

四、客观填空题共 5 题，100 分

相关推荐