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

官方QQ群

 

PDF版点击查看Web前端开发初级模拟测试卷（四）.pdf

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

一、单选题共30题，60分

1.以下说法正确的是： D

• Atable的表单标签
• Btd的代表行
• Ctr代表列
• Dtable是表格标签

2.在javascript中，执行结果正确的是： B

• Atypeof(null)的结果为null
• Btypeof(typeof(5))的结果为"string"
• Ctypeof(5)的结果为Number
• Dtypeof(typeof(undefined))的结果为undefined

3.让一个动画名为fade的动画持续执行并且在第一次开始时延迟0.5s开始,每次动画执行1s，以下代码正确的是 A

• Aanimation:fade 1s 0.5s infinite
• Banimation:fade 0.5s 1s infinite
• Canimation:fade 1s 0.5s linear
• D以上都不正确

4.CSS3中可以用（）关键词，自定义字体代表小图标 C

• Atransition
• Btransform
• Cfont-face
• Dfont-family

5.在javascript中，执行后输出的结果是： B

var name="zhaonan"; var obj1={ name:"miao", age:20, say:function(){ console.log(this.name); } } var obj2={ name:"xue", age:30, say:function(){ console.log(this.name); } } var f=obj2.say; console.log(f()); var e=f.bind(obj1); console.log(e()); var k=e.bind(obj2); console.log(k());

• Azhaonan zhaonan miao
• Bzhaonan miao miao
• Czhaonan miao xue
• Dmiao zhaonan xue

6.不是HTML5的新增的特性是： D

• A新增了很多语义化标签
• B新增了音频和视频
• C新增了本地存储
• D新增伪类

7.css样式初始化的原因描述错误的是： C

• A清除默认样式
• B由于浏览器的内核不同，对标签的默认样式解析不同，导致显示效果不同，所以需要初始化样式
• C和浏览器没有关系，只是规范而已
• D保证各个浏览器页面效果的一致性

8.在jquery中，常用的stop()，关于stop()的说法错误的是 D

• Astop()停止当前动画，后续动画继续执行
• Bstop(true)是停止当前动画，后续动画不执行
• Cstop(true,true)是停当前执行的动画，直接跳到当前动画的最终状态，后续动画不执行
• Dstop(true,true)是停当前执行的动画，直接跳到当前动画的最终状态，后续动画继续执行

9.在javascript中,关于数学对象说法正确的是: C

• AMath.round(4.5)的结果是4
• BMath.floor(4.5)的结果是5
• CMath.ceil(4.5)的结果是5
• DMath.min(3,4,5)的结果是5

10.对于addEventListener绑定事件的说法错误的是 C

• A可以给一元素绑定多个事件
• BaddEventListener中的this指绑定的元素
• Cdiv.addEventListener("click",function(),false)中的false代表捕获事件
• Ddiv.addEventListener("click",function(),false)中的false代表冒泡事件

11.对闭包的理解说法错误的是： A

• A闭包不能避免全局污染
• B闭包可以将内部函数保存到外部的时候
• C可以从外部访问内部变量
• D闭包把外部变量保存到内存中不被释放，导致内存泄漏。

12.设置一个div元素的外边距为上:20px,下:30px,左:40px,右:50px，下列书写正确的是：D

• Apadding:20px 30px 40px 50px;
• Bpadding:20px 50px 30px 40px;
• Cmargin:20px 30px 40px 50px
• Dmargin:20px 50px 30px 40px

13.块级元素说法正确的是： B

• A块级元素和其他元素在一行显示
• B块级元素对宽和高，边距生效
• C块级元素对宽和高生效，边距不生效
• D块级元素对宽，高，边距都不生效

14.关于jQuery中删除已有元素的方法说法正确的是（） C

• Aremove()从被选元素中删除子元素
• Bremove()删除被选元素（不会删除其子元素）
• Cempty()从被选元素中删除子元素
• Dempty()删除被选元素及其子元素

15.在jquery中，下列哪一个是用来查找表单中所有隐藏元素的 B

• Avisible
• Bhidden
• Cvisible()
• Dhidden()

16.设置文字的大小为14px，加粗，行高为28px，字体是微软雅黑，字体是倾斜的，以下书写正确的是：D

• Afont:14px "微软雅黑" 28px 600 italic
• Bfont:"微软雅黑" 14px/28px 600 italic
• Cfont:14px/28px 600 "微软雅黑" italic
• Dfont:600 italic 14px/28px "微软雅黑"

17.在javascript中，数据类型转换正确的是： A

• ANumber("123abc")的值为NaN
• BparseInt("123abc")的值为NaN
• CparseInt("10",8)的值为10
• DparseFloat("abc123.3")的值为123.3

18.对于事件流说法错误的是：C

• A事件流分为三个阶段
• B事件流分捕获阶段、目标节点、冒泡阶段
• C捕获和冒泡同时存在先执行冒泡阶段
• D目标阶段存在捕获和冒泡，按顺序执行

19.在开发过程中，图片下面有1像素的小间隙，如何去除： B

• A给图片设置font-size:0
• B给图片设置display:block
• C给图片设置border:0
• D给图片设置border:none;

20.css3中的伪类div p:nth-of-type(3){color:red}的说法正确的是：B

• A给div元素的第三个子元素设置文字颜色为红色
• B给div元素的后代元素的第三个p元素设置文字颜色为红色
• C给div的后代元素p设置文字颜色为红色
• D以上说法都不正确

21.在jquery中，下列哪一个是用将$(“<p></p>”)来追加到指定元素末尾的（）C

• AinsertAfter()
• Bappend()
• CappendTo()
• Dafter()

22.Jquery中，找到所有子元素的方法是： C

• Afind()
• Bsiblings()
• Cchildren()
• Dparent()

23.在javascript中，下列转Boolean后值为false的是： B

• ABoolean(" ")
• BBoolean(0)
• CBoolean([])
• DBoolean({})

24.设置背景颜色为green,背景图片垂直居中显示，背景图片充满整个区域，但是背景图片不能变形,图片只出现一次，以下书写正确的是： A

• - *A*background:url("../img/img1.jpg") no-repeat center/cover green;
  - *B*background:url("../img/img1.jpg") repeat center/cover green;
  - *C*url("../img/img1.jpg") no-repeat center/100% green;
  - *D*url("../img/img1.jpg") no-repeat center/100% 100% green;

  25.css3中用什么来定义过渡动画的时间 C

• Atransition-property
• Btransition-timing-function
• Ctransition-duration
• Dtransition-delay

  26.在javascript中,获取今天是星期几的方法是： C

• Anew Date().getDate()
• Bnew Date().getTime()
• Cnew Date().getDay()
• Dnew Date().getFullYear()

  27.在javascript中,执行下列代码后输出的结果是： if(function(){}){ console.log(1); }else{ console.log(2); } B

• A2
• B1
• C什么也不输出
• D报错

  28.下列属于内联元素的是： B

• Adiv
• Ba
• Cp
• Dtable

  29.在javascript中，执行下列代码输出的结果是： console.log(+"5"*2+"6"-"4"+true) B

• A13
• B103
• C104
• D12true

  30.在javascript中，执行下列代码输出的结果是： for(var i=0;i<4;i++){ console.log(i) } console.log(i) A

• A0 1 2 3 4
• B0 1 2 3 4 5
• C0 1 2 3

• D4 4 4 4

  二、多选题共15题，30分

  1.关于 @media书写正确的是： AB

• A@media screen and (max-width: 300px)
• B@media only screen and (max-width: 500px)
• C@media screen (max-width: 500px)
• D@media (max-width: 500px)

  2.关于选择器优先级正确的是： AC

• Aid选择器>类选择器>标签选择器
• Bid选择器>!important>类选择器>标签选择器>通配符
• C!important>id选择器>类选择器>标签选择器
• Did选择器>类选择器>标签选择器>!important

  3.关于doctype html说法正确的是： BC

• A区分大小写，只有<!DOCTYPE html>才是正确的
• B这句话的作用是告诉浏览器以什么标准去解析网页
• C这句话可以省略，省略后页面呈怪异模式
• D以上说法都正确

  4.javascript中,关于parseInt()说法正确的是： AB

• A将其他类型的数据转成数值
• B可以将其他进制的数据转成十进制
• CparseInt()与Number()方法功能相同
• D以上说法都正确

  5.下列属于jquery选择器的是： ABCD

• A基本选择器
• B层级选择器
• C属性选择器
• D位置选择器

  6.下面哪几种是Jquery中表单的对象属性： ABD

• A:checked
• B:enabled
• C:hidden
• D:selected

  7.引入样式的方法有哪几种 ABCD

• A内联样式
• B内部样式
• C外部样式

• D以上都正确

  8.在form标签中，属性method的值有哪些 BC

• Arequest
• Bget
• Cpost
• D以上都正确

  9.以下关于标签的嵌套书写错误的是： ABCD

• - *A*<p><p></p></p>
  - *B*<a href=""><a href=""></a></a>
  - *C*<ul><h2></h2><li></li><li></li></ul>
  - *D*以上都是错误的

10.javascript中,循环语句有哪些？ BCD

• Aif
• Bwhile
• Cdo while
• Dfor

11.javascript中,下列结果为NaN的是： ABCD

• ANumber("adfa")
• BparseInt("undefined")
• CparseInt("null")
• DparseInt("")

12.javascript中，下列表达式结果为true的是： BCD

• A[]==[]
• B![]==false
• C[]==false
• D[0]==false

13.下列对于float属性的特点说法错误的是： ABC

• Afloat能向左和向右移动，也可以上下移动
• Bfloat会占据原有空间
• C清除浮动的作用不大，可以省略
• D给父级元素设置height可以清除浮动

14.jQuery中遍历节点的方法，正确的是 ABD

• Anext() 取得匹配元素后面紧邻的同辈元素
• Bprev() 取得匹配元素前面紧邻的同辈元素
• Csiblings() 取得匹配元素前的所有同辈元素
• Dparent() 取得元素的父级元素

15.以下属于HTML5新标签的是： BCD

• Atitle
• Bouput
• Cnav
• Daside

三、判断题共5题，10分

1.jquery中获取元素宽度包含padding的方法是innerwidth() 对

• A对
• B错

2.在javascript中,this都指向调用者 错

• A对
• B错

3.html是一种超文本标记语言 A

• A对
• B错

4.在javascript中，document.getElementById返回一组元素 错

• A对
• B错

5.CSS中设置字符间距的是word-spacing 错

• A对
• B错

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

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

这是资源管理平台，用html+css完成。

项目包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含base.css文件；img文件夹包含用到的图片。

请根据效果图和已提供的代码，补全（1）-（20）中的代码。
【效果图】

index.html在PC端效果如图所示。

【素材】

素材.zip

【代码：首页index.html】
<!-- 声明 -->

1

<html>
<head>
    <!-- 设置编码为utf-8 -->
    <meta
2
="UTF-8">
    <title>资源中心-首页</title>
    <!-- 引入样式 -->
    <
3
href="css/base.css" rel="
4
">
</head>
<body>
<!--公用头部导航开始-->
<div>
    <div>
        <div class="top_nav fl">
            <ul>
                <!-- 填写链接属性 -->
                <li><a
5
="#">平台首页</a><span></span></li>
                <li><a href="#">个人中心</a><span></span></li>
                <li><a href="#">我的主页</a><span></span></li>
                <li><a href="#">学习中心</a><span></span></li>
                <li><a href="#">资源中心</a><span></span></li>
            </ul>
        </div>
        <div class="top_secher fl">
            <!-- 插入图片 -->
            <
6

7
 ="img/xiaobiao_img3.jpg">
            <input type="text">
        </div>
        <div class="top_info fr">
            <ul>
                <li>
                    <img src="img/xiaobiaio_tx.jpg" width="46" height="46">
                </li>
                <li>李凤鸣同学<span>1</span></li>
                <li>
                    <div>
                        <img src="img/xiaobiao_img1.jpg">
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/xiaobiao_img2.jpg">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--公用头部导航结束-->


</body>
</html>


【代码：CSS文件base.css】
@charset "utf-8";
/* CSS Document */


/*样式重置*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,hr,span,form,fieldset,table,td,img,div,dl,dt,dd,input{
margin:0;
padding:0; 

8
;/*清除列表样式*/
}
body,html{

9
:"Microsoft YaHei";/*设置字体*/
font-size: 14px;
}
a{

10
;/*去掉下划线*/
}


img{
border:none; 
display:block; 
margin: 0 auto;
}
input,select,textarea{
outline:none;
border:none; 
background-color:
11
;/*设置背景透明*/
}
input:focus { 
outline: none; 
}
textarea{

12
;/*阻止手动改变文本框大小*/
}


/*清除浮动*/
.clearfix:after{
content:"";
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}


/*头部样式*/
.top{ 
width:100%; 
margin:0; 
padding:0; 
height:60px; 
background-color:#FFCF4E; 

13
;/*设置固定定位*/ 

14
: 9999;/*设置层级*/
}
.top_conten{ 
width:1200px; 
margin:0 auto; 

15
;/*设置相对定位*/
}
.top_nav ul{ 
margin-left: 0px;
}
.top_nav ul li{  
position:relative;
float: left; 
text-align: center; 
color: #383337; 
font-size: 16px; 

16
: 40px; /*设置行高*/
padding-top: 7px;
margin: 0 15px;
}
.top_nav ul li a{ 
color: #383337;
}
.top_nav ul .cur{ 
border-bottom: 1px solid #383337;
}
.top_nav ul .cur a{
color:#383337;
}
.top_nav span{
display:inline-block;
position:absolute;
bottom:-1px;
left:50%;
margin-left:-35px;
width:70px;
height:1px;
background:#383337;
overflow:hidden;

17
:
18
(0);/*放大*/
}
.top_nav ul li:hover span{
transform:scale(1);

19
:all .5s ease;/*设置过渡时间*/
}
.top_secher{ 
margin-top:18px; 
border:none; 
width: 0; 
line-height: 24px; 
height: 24px; 
border-radius: 13px; 
text-align: left; 
transition: all .5s ease;
}
.top_secher img{ 
margin-left: 4px; 
margin-top: 3px; 
width: 19px; 
display:block; 
float: left;
}
.top_secher input{ 
width: 120px; 
float: left; 
margin-left: 28px; 
line-height: 24px; 
position: absolute;
}
.top .open{ 
width: 158px; 
border: 1px solid #343434; 
transition: all .5s ease;
}
.top_info ul li{ 
float:left; 
margin:0 10px; 
height:46px; 
margin-top:7px; 
display:table; 
line-height:46px; 
position:relative;
}
.top_info ul li > div{ 
display:table-cell; 
vertical-align:middle;
text-align: center; 
cursor:pointer;
}
.top_info ul li span{ 
background-color: #FF4A1F; 
border: 1px solid #fff; 
color: #fff; 
padding: 0 4px; 
font-size: 12px; 
line-height: 15px; 
top:3px; 
left: 68px; 
position: absolute; 

20
: 50%;/*设置圆角*/
}

打开解析

（1）<!DOCTYPE html>
（2）charset
（3）link
（4）stylesheet
（5）href
（6）img
（7）src
（8）list-style: none
（9）font-family
（10）text-decoration: none;
（11）transparent
（12）resize:none;
（13）position: fixed 
（14）z-index
（15）position:relative
（16）line-height
（17）transform
（18）scale
（19）transition
（20）border-radius

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

这个某项目中的其中一部分，应用HTML5和css3技术完成页面的布局。项目包含主页index.html、style.css和img。要求鼠标经过翻转出现遮罩层，根据效果图和已有的代码补全（1）-（10）的代码
【效果图】

【素材】

素材.zip
【代码：主页index.html】此页代码在此省略，请在“实操代码”中第二题查看
【代码：style.css】

.clearfix:after{
    display:block; 
    content:''; 
    
1
;/*清除浮动*/
}
.clearfix{
    zoom:1;
    
2
;/*文字居中*/
}
.fl{
    float:left;
}
.fr{
    float:right;
}


.part5 .tBox{
    width: 1154px;
    height: 430px;
    margin: 30px auto 0;
    position: relative;
}
.part5 .tBox .picBox{
    width: 1000px;
    margin: 0 auto;/*盒子居中*/
    height: 100%;    
    
3
;/*溢出隐藏*/
    position: relative;
}
.part5 .tBox .picBox .roll{
    position: relative;
    margin-right: 24px;    
    perspective: 1000px;       
    
4
;/*鼠标经过变小手状态*/
}
/*最后一个元素*/
.part5 .tBox .picBox .roll:last-child{
    margin-right:0;
}
.part5 .tBox .picBox li .bg{
    width: 100%;
    height: 65px;
    background:
5
; /*背景黑色透明80%*/
    position: absolute;
    left: 0;
    bottom: 0;
}
.part5 .tBox .picBox li h3{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65px;
    text-align: left;
    padding-left: 13px;
}


.part5 .tBox .picBox li .tName{
    font-size: 18px;
    color: #fff;
    padding-top: 13px;
    margin-bottom: 5px;
}
.part5 .tBox .picBox li .tTitle{
    font-size: 12px;
    color: #b4b4b4;
}


.roll .box-content{
    width: 100%;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8); 
    transform:
6
;/*Y轴旋转90度*/
    transition: all 0.50s ease-in-out 0s;/*过渡效果*/
    overflow: hidden;
}
.roll .box-img{
    transform: rotateY(0);
    transition: all 0.50s ease-in-out 0s;/*过渡效果*/
}
.roll:hover .box-img{
    transform:
7
;/*Y轴旋转-90度*/
}
.roll:hover .box-content{
    transform:
8
;/*Y轴旋转0度*/;
}
.roll .box-content .t1{
    font-size: 20px;
    
9
: bold;/*文字加粗*/
    color: #fff;
    padding-top: 50px;
}
.roll .box-content .t2{
    font-size: 16px;
    color: #fff;
    padding-top: 12px;
}
.roll .box-content .t3{
    width: 190px;
    height: 1px ;
    background: #fff;
    margin: 20px auto 0;
}
.roll .box-content .t4{
    font-size: 14px;
    width: 182px;
    
10
;/*文字两端对齐*/
    color: #fff;
    margin: 20px auto 0;
}

打开解析

（1）clear:both  
（2）text-align: center  
（3）overflow: hidden
（4）cursor: pointer
（5）rgba(0,0,0,.8)
（6）rotateY(90deg)
（7）rotateY(-90deg)
（8）rotateY(0)
（9）font-weight
（10）text-align: justify

1. 阅读下列说明、效果图和代码，用jquery完成指定功能。
   【说明】

先要完成一个通讯录，在需要添加人员的时候，点击“添加行”，当点击删除的时候，序号需要重新排序。同时为了提高用户体验，需要用js实现隔行换色。请根据现有的代码和效果图补全代码（1）-（10）
【效果图】

【素材】

素材.zip

【index.html】
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通讯录</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入jq库 -->
    <script src="
1
"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="box">
        <!-- 表格居中 -->
        <table
2
="center">
            <!-- 表格标题 -->
            <
3
>通讯录</caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>13754448888</td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr>
                 <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>13788889999</td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button class="add">添加一行</button>
    </div>
</body>
</html>
【style.css】
.box{
    width: 400px;
    margin:30px auto;
    text-align: center;
}
.box>button{
    width: 100%;
    height: 40px;
    margin-top:20px;
    border:none;
    border-radius: 10px;
    background-color: green;
    color:#fff;
}
table{
    width:400px;
    text-align:center;
    /*边框重叠*/
   
4
;
}
table caption{
    height: 60px;
    line-height: 60px;
    font-weight: 600;
}
table th{
    background-color: #f5f5f5;
}
table,td,th{
    border:1px solid #ccc;
}
table tr{
    height:50px;
}
【index.js】
$(function(){
    // 添加行 绑定点击事件
    $(".add").
5
(function(){
        var newTr=$("<tr></tr>");
        for(i=0;i<$("thead>tr>th").length;i++){
            newTd=$("<td></td>");
            if(i==0){
                newTd.text($("tbody>tr").length+1);
            }
            if(i==$("thead>tr>th").length-1){
                //设置标签内容
                newTd.
6
("<button>删除</button>")
            }
        //追加节点
            newTd.
7
(newTr);
        };
        $("tbody").append(newTr);
        changeColor();
    })


    // 隔行换色
    function changeColor(){
        $("tbody tr:odd").css("background","#f5f5f5");
        $("tbody tr:even").css("background","#fff");
    }
    changeColor();


    // 删除行
    $("tbody").
8
("click","button",function(){
        $(this).parents("tr").remove();
        changeColor();
        order();
    });
    //重新排序
    function order(){
        $("tbody tr").
9
(function(index){
            $(this).children().eq(0).text(
10
);
        });
    }
})

打开解析

（1）js/jquery.min.js
（2）align
（3）caption
（4）border-collapse: collapse
（5）click
（6）html
（7）appendTo
（8）on
（9）each
（10）index+1

4.阅读下列说明，用javascript编写程序。填写（1）至（10）代码。
【说明】
在某项目中，在首页需要实现左右轮播的效果图，要求用javascript完成，根据已经提供的代码，补全（1）-（10）位置上的代码。

【效果图】

【素材】

素材.zip
【index.html】
布局结构如下代码，并将样式引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>第三题-无缝轮播</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">
</head>
<body>
<div class="banner" id="banner">
    <ul class="clear" style="left:-100%">
        <li><img src="img/index-banner3.jpg"></li>
        <li><img src="img/index-banner1.jpg"></li>
        <li><img src="img/index-banner2.jpg"></li>
        <li><img src="img/index-banner3.jpg"></li>
        <li><img src="img/index-banner1.jpg"></li>
    </ul>
    <div id="left"></div>
    <div id="right"></div>
    <div id="pageNav"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>
【style.css】
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,dl{
    margin:0;
    padding:0;
}
ul,ol{
    list-style:none;
}
img{
    display:block;
}
.clear:after{
    content:"";
    display:block;
    clear:both;
}
.banner{
    position:relative;
    width:100%;
    overflow:hidden;
}
.banner ul{
    position:relative;
    width:500%;
}
.banner ul li{
    width:20%;
    float:left;
}
.banner ul li img{
    width:100%;
}
#left,#right{
    position:absolute;
    top:50%;
    margin-top:-25px;
    width: 50px;
    height:50px;
    cursor:pointer;
    background-color: rgba(0,0,0,0.4);
}
#left{
    left:0;
}
#right{
    right:0;
}
#left:hover,#right:hover{
    background-color: rgba(0,0,0,0.8);
}
#pageNav{
    position: absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
}
#pageNav a{
    display:inline-block;
    margin:0 5px;
    width:15px;
    height:15px;
    background-color: #fff;
    border-radius:50%;
}
#pageNav a.cur{
    background-color: orange;
}
【index.js】
// 获取元素
//（1）根据标签获取元素
var banner=document.getElementById("banner"),
    ul=banner.
1
("ul")[0],
    li=ul.getElementsByTagName("li"),
    leftBtn=document.getElementById("left"),
    rightBtn=document.getElementById("right"),
    pageNav=document.getElementById("pageNav"),
    index=0,
    timer=null,
    animate=false;


// 追加小圆点
for(var i=0;i<li.length-2;i++){
//创建元素
    var pageA=
2
("a");
if(i==0){
//设置类名
        pageA.
3
="cur";
}
//追加节点
    pageNav.
4
(pageA);
}
// 给小圆点绑定点击事件
var aBtn=pageNav.getElementsByTagName("a");
for(var j=0;j<aBtn.length;j++){
//记录索引值
   
5
;
    aBtn[j].onclick=function(){
        if(animate){
            return
        }
//计算偏移量
        var offset=
6
;
    //传参-当前点击对象的索引值
        btnShow(
7
);
        imgShow(offset);
        index=this.index;
    }
}
    //  小圆点点亮
function btnShow(num){
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].className="";
    }
    aBtn[num].className="cur";
}
    //  切换图
function imgShow(offset){
    animate=true;
    var speed=offset/10;
    var newLeft=parseInt(ul.style.left)+offset;
    var go=function(){
        if(speed<0&&parseInt(ul.style.left)>newLeft || speed>0 && parseInt(ul.style.left)<newLeft){
            ul.style.left=parseInt(ul.style.left)+speed+"%";
            //延时计时器

8
(go,50);
        }else{
            ul.style.left=(index+1)*(-100)+"%";
            animate=false;
        }
    }
    go();
}
// 给左右箭头绑定点击事件
leftBtn.onclick=function(){
    if(animate){
        return
    }
    index--;
    if(index<0){
        index=aBtn.length-1;
    }
    btnShow(index);
    imgShow(100);
}
rightBtn.onclick=function(){
    if(animate){
        return
    }
    index++;
    if(index==aBtn.length){
        index=0;
    }
    btnShow(index);
    imgShow(-100);
}
// 自动轮播
function lunbo(){
    rightBtn.onclick();
}
timer=setInterval(lunbo,3000);
// 鼠标经过Banner区域清除计时器
banner.onmouseover=function(){
   
9
;
}
// 鼠标离开继续自动轮播
banner.
10
=function(){
    console.log(1);
    timer=setInterval(lunbo,3000);
}

打开解析

（1）getElementsByTagName

（2）document.createElement

（3）className

（4）appendChild

（5）aBtn[j].index=j

（6）(this.index-index)*(-100)

（7）this.index

（8）setTimeout

（9）clearInterval(timer)

（10）onmouseout

5.阅读下列说明、效果图和代码，完成移动端布局。
【说明】

在某项目中，项目中的文件包含index.html、style.css和images文件夹。请根据现有的代码和效果图补全代码（1）-（5）
【效果图】

【素材】

素材.zip
【index.html】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线公开课学习app</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
    <div>
        <div>
            <i class="icon icon-search"></i>
            <input type="text" placeholder="搜索课程">
        </div>
    </div>
</header>
<section>
    <div>
        <img src="images/banner.png" alt="">    
    </div>
    <div>
        <a href="javascript:;">
            <div>
                <img src="images/nav-001.png" alt="">
            </div>
            <div>
                <h2>临床学院</h2>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/nav-002.png" alt="">
            </div>
            <div>
                <h2>科研学院</h2>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/nav-003.png" alt="">
            </div>
            <div>
                <h2>医考学院</h2>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/nav-004.png" alt="">
            </div>
            <div>
                <h2>科员学院</h2>
            </div>
        </a>
    </div>
    <div>
        <h1>精品推荐</h1>
    </div>
    <div>
        <a href="javascript:;">
            <div>
                <img src="images/pd-001.png" alt="">
            </div>
            <div>
                <h3>从基础到实战：全面讲解补液</h3>
                <p>￥215.00 <i>新课特惠</i> <em>￥398</em> </p>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/pd-002.png" alt="">
            </div>
            <div>
                <h3>Meta 分析零基础的实用教程</h3>
                <p>￥215.00 <em>￥398</em> </p>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/pd-003.png" alt="">
            </div>
            <div>
                <h3>脊柱MRI进阶指南 分析零基础的实用教程</h3>
                <p>￥215.00 <i>新课特惠</i> <em>￥398</em> </p>
            </div>
        </a>
        <a href="javascript:;">
            <div>
                <img src="images/pd-004.png" alt="">
            </div>
            <div>
                <h3>从基础到实战：全面讲解补液</h3>
                <p>￥215.00<em>￥398</em> </p>
            </div>
        </a>     
    </div>
</section>
</body>
</html>


【style.css】
html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, textarea, th, td {
    margin: 0;
    padding: 0;
}
html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: '微软雅黑';
    font-weight: normal;
}
* {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}
body {
    background: #fff;
    color: #666;
}
ul,ol{
    list-style: none;
}
.clearfix::after {
    clear: both;
    content: "";
    display: block;
}
.header{
    height: 44px;
    position: relative;
    display: flex;
    z-index: 102;
    background:#fefefe;
}
.header .center{
    -webkit-box-ordinal-group: 3;
   
1
;/*设置弹性盒子*/
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 90%;
    margin-left: 4%;
}
.search-box {
    background: #ededed;
    border-radius: 22px;
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 32px;
}
.icon-search {
    position: absolute;
    background-image: url("../images/index.png");
    left: 8px;
    top: 0.4rem;
    background-size: 19px;
}
.search-box input {
    width: 100%;
    background: none;
    border: none;
    font-size: 0.85rem;
    text-align: left;
    height: 32px;
    border-radius: 3px;
    padding: 0.55rem 0 0.55rem 1.8rem;
}


.scrollView {
    width: 100%;
    height: 100%;
   
2
;/*剩余空间全部分给该盒子*/
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 53px;
}
.slider-wrapper {
    display: flex;
    width: 96%;
    margin:0 auto;
    transform: translate3d(0px, 0px, 0px);
    position: relative;
    z-index: 1;
    padding:0.55rem;
}
.slider-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
}
.item {
    width: 96%;
    margin:0 auto;
    padding: 0.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
.palace-grid .palace-grid-icon{
    width: 40px;
    height: 40px;
    margin:0 auto;
}
.palace-grid .palace-grid-text {
    display: block;
    text-align: center;
    color: #333;
    font-size: 0.85rem;
   
3
;/*阻止换行*/
   
4
;/*文字溢出显示省略号*/
    overflow: hidden;
    padding-top: 0.2rem;
}
.palace-grid .palace-grid-text h2 {
    font-size: 0.8rem;
    font-weight: normal;
    color: 
    #666666;
}
.flex {
    display: flex;
    align-items: center;
    padding: 15px;
    position: relative;
}
.flex h1 {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
}
.list-theme{
    width: 96%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.list-item {
    width: 46%;
    margin: 0 2% 2% 2%;
    background: #fff;
    display: block;
    overflow: hidden;
}
.list-theme-message {
    background: 
    #fff;
    padding: 0.3rem 0;
}
.list-theme-title {
    color: #333;
    font-size: 0.92rem;
    margin: 0.2rem 0;
    overflow: hidden;
    font-weight: normal;
    white-space: nowrap;/*阻止换行*/
    text-overflow: ellipsis;/*文字溢出显示省略号*/


}
.list-theme-message p {
    color: #f68f40;
    font-size: 0.99rem;
    font-weight: 500;
    height: 1.5rem;
}
.list-theme-message p i {
    font-style: normal;
    font-size: 0.7rem;
    border: 1px solid 
    #f68f40;
    border-radius: 2px;
    padding: 0 0.2rem;
}
.list-theme-message p em {
    font-style: normal;
    font-size: 0.7rem;
    padding: 0 0.2rem;
    color: #999999;
   
5
;/*删除线*/
}

打开解析

（1）display: flex
（2）flex: 1
（3）white-space: nowrap
（4）text-overflow: ellipsis
（5）text-decoration: line-through

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/436/

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

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

1+x 证书 Web 前端开发中级理论考试（试卷 9 ）含 PDF 高清版
http://blog.zh66.club/index.php/archives/439/

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/

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

1+x 证书 Web 前端开发初级实操考试（试卷 5 ）
http://blog.zh66.club/index.php/archives/408/

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

1+x 证书 Web 前端开发初级实操考试（试卷 6 ）
http://blog.zh66.club/index.php/archives/411/

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 前端开发初级实操考试（试卷 8 ）
http://blog.zh66.club/index.php/archives/422/

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

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

1+x 证书 Web 前端开发初级实操考试（试卷 10 ）
http://blog.zh66.club/index.php/archives/431/

1+x 证书 Web 前端开发初级实操考试（试卷11 ）
http://blog.zh66.club/index.php/archives/433/

1+x 证书 Web 前端开发入训能力水平测试初级一卷
http://blog.zh66.club/index.php/archives/409/

《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
http://blog.zh66.club/usr/uploads/2019/12/77517732.pdf
http://blog.zh66.club/usr/uploads/2019/12/733177909.pdf
http://blog.zh66.club/usr/uploads/2019/12/3679037667.pdf