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

官方QQ群

共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.正确答案是( )

  1. 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.A2.A3.A4.C5.C
6.B7.C8.C9.D10.C
11.D12.D13.B14.A15.B
16.D17.A18.A19.C20.C
21.B22.A23.B24.C25.C
26.B27.B28.A29.A30.A
1.AC2.AC3.AB4.ABCD5.BC
6.ABD7.BC8.ABCD9.AD10.AC
11.BCD12.AC13.AB14.ACD15.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. 阅读下列说明、效果图,进行静态网页开发,填写(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. 阅读下列说明、效果图和代码,进行静态网页开发,填写(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. 阅读下列说明、效果图和代码,进行静态网页开发,回答问题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. 阅读下列说明、效果图和代码,完成交互效果,回答问题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